CSS перенос слов / перенос строки на подчеркиваниях в дополнение к пробелам и дефисам - PullRequest
Новая
       28

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

32 голосов
/ 11 июня 2011

У меня есть куча действительно длинных имен файлов, которые вызывают переполнение моего 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_
file_name_that_uses_underscores_
Вместо_of_spaces.pdf

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

Спасибо.

Ответы [ 5 ]

18 голосов
/ 11 июня 2011

Вы можете использовать тег <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;, которая является пробелом нулевой ширины. Иногда это работает лучше в определенных браузерах.

15 голосов
/ 29 мая 2013

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

word-break: break-all

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

2 голосов
/ 07 апреля 2015

Кажется, в настоящее время вы не можете использовать 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>
1 голос
/ 09 апреля 2015

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

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

Разметка: 

Here_<span> </span>is_<span> </span>an_<span> </span>example...
0 голосов
/ 01 августа 2018

Без 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>
...