Перенос слов / разрыв строки в CSS на символах подчеркивания в дополнение к пробелам и дефисам

У меня есть куча действительно длинных имен файлов, которые вызывают переполнение моего HTML-форматирования. Во всех этих именах файлов вместо пробелов используются символы подчеркивания, и если бы они были пробелами, их можно было бы легко прервать / перенести. Нравится.

Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf

Есть ли способ указать CSS обрабатывать символы подчеркивания в тексте, как если бы они были пробелами или дефисами, и, таким образом, переносить / разрывать символы подчеркивания? Нравится.

Here_is_an_example_of_a_really_long_
имя_файла_that_uses_underscores_
вместо_of_spaces.pdf

Для моих целей я не могу использовать для этого скрипт. Я также не хочу использовать трюк word-wrap: break-word, потому что он обычно не работает без указания ширины. Кроме того, он произвольно разбивается посередине слов.

Спасибо.


css line-breaks word-wrap
person dsmtoday    schedule 11.06.2011    source источник

Ответы (5)


arrow_upward
23
arrow_downward

Использовать CSS

word-break: break-all

jsfiddle - код, результат

person hackhowtofaq    schedule 29.05.2013
comment
Это также будет переносить символы, которые не являются подчеркиваниями. - person rmcclellan; 29.05.2014
comment
Это не решает проблему, так как это будет переноситься после каждого символа, а не только подчеркивания. - person user428747; 06.04.2015

arrow_upward
22
arrow_downward

Вы можете использовать тег <wbr> (http://www.quirksmode.org/oddsandends/wbr.html), что позволяет браузеру ломаться, где бы вы его ни разместили.

Итак, ваш HTML должен быть:

Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...

Вы можете добавить этот тег на стороне сервера перед выводом HTML.

Альтернативой является объект &#8203;, который представляет собой пространство нулевой ширины. Иногда это лучше работает в определенных браузерах.

person Keltex    schedule 11.06.2011
comment
Обратите внимание, что это новый тег HTML5, который может не на 100% поддерживаться во всех браузерах. - person Omer Tuchfeld; 11.06.2011
comment
Спасибо за ответ. К сожалению, я не могу обрабатывать имена файлов на стороне сервера. Мне нужен способ указать браузеру обрабатывать символы подчеркивания, как если бы они были пробелами или дефисами. Я надеялся, что у меня будет какое-нибудь CSS-джиу-джитсу, которое позволит мне это сделать. Что-то вроде ‹span style = white-space-char: _› Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf ‹/span› - person dsmtoday; 13.06.2011
comment
Это не поддерживается IE8. - person Knu; 11.04.2015
comment
Вы оставили довольно жесткие ограничения, чтобы получить желаемый результат. Без дополнительных скриптов или принятия разрывов между словами это просто невозможно с помощью одного лишь CSS. - person Joe Corby; 13.04.2015

arrow_upward
3
arrow_downward

Без HTML5 вы можете использовать Javascript для вставки <span></span> перед или после символов, которые вы хотите разбить:

//Jquery
$("#id_of_the_container").html(function(index, text) {
    return text.replace(/_/g, "_<span />");
});

//Pure Javascript
var htmlText = document.getElementById("id_of_the_container").innerHTML;
document.getElementById("id_of_the_container").innerHTML = htmlText.replace(/_/g, "_<span />");

затем используйте класс CSS контейнера, чтобы обернуть слова:

.yourClass {
    word-break : break-word;
}

и, наконец, установите пустое пространство шириной в ноль пикселей в качестве содержимого перед диапазоном:

.yourClass > span:before {
    content: "\200b";
}


$("#set").html(function(index, text) {
  return text.replace(/_/g, "_<span />");
});
.boxes-container > div {
  margin: 5px;
  max-width: 200px;
  border : solid black 2px;
  display: inline-block;
  padding : 5px;
}

.bigger {
  margin-right : 200px !important;
}

.wrap {
  word-break: break-word;
}

.wrap > span:before {
  content : "\200b";
}

.answer-example {
  color : RGB(0, 50, 0);
  border-color: RGB(0, 50, 0) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="boxes-container">
  <div class="bigger">
    Without_Anything,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div class="wrap">
    Without_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div id="set" class="wrap answer-example">
    With_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
</div>

person Sirmyself    schedule 01.08.2018

arrow_upward
2
arrow_downward

Похоже, что в настоящее время вы не можете использовать CSS для этой цели.

Но вы можете использовать JavaScript для автоматического добавления тегов <wbr>, например:

var arr = document.getElementsByClassName('filename');
for(var i = 0; i < arr.length; i++) {
  arr[i].innerHTML = arr[i].innerHTML.replace(/_/g, '_<wbr/>');
}
body { width: 250px; }
<a class="filename">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</a>

person user    schedule 07.04.2015
comment
‹Wbr› действительно для HTML5, мне нужно поддерживать IE 8 и выше. Следовательно, это решение мне не помогает. Спасибо хоть . - person user428747; 08.04.2015
comment
@user, это исправимо для IE, но обязательно добавьте это исправление. только для CSS, специфичного для IE (через условные комментарии), поскольку есть сообщения о том, что в некоторых случаях пробелы нулевой ширины могут становиться полными пробелами при копировании. Но, насколько мне известно, другого способа сделать это в IE нет. - person user; 08.04.2015

arrow_upward
2
arrow_downward

Без использования JavaScript или <wbr> вы можете вставить <span> </span> (обратите внимание на пробел) со следующим CSS:

span{
    width: 0;
    overflow: hidden;
    display: inline-block;
}

Разметка:

Here_<span> </span>is_<span> </span>an_<span> </span>example...
person spaark    schedule 09.04.2015