Перенос слов непрерывной точкой (.) С использованием css - PullRequest
Новая
       8

Перенос слов непрерывной точкой (.) С использованием css

0 голосов
/ 12 октября 2018

Я пытаюсь сделать перенос слов любым типом символов, используя css.

Вот то, что я css использую 

.wordbreak {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

Каким-то образом перенос слов не работает с непрерывной точкой (.), См. Эту кодовую ручку ссылка

В этом примере вы видите много точек без пробелов между ними.Они не ломаются на краю окна, что приводит к горизонтальной полосе прокрутки.После этого получается длинное слово без пробельных символов между ними, и оно разрывается на краю окна, как и ожидалось.

Почему точки не ломаются на краю окна?
Могу ли я решить эту проблему вТолько CSS?
Есть ли обходной путь, может быть, в JavaScript?

1 Ответ

0 голосов
/ 12 октября 2018

Удалите word-break: break-all; из вашего CSS, он будет работать как положено.Вы хотите разбить слово, и вы не можете одновременно использовать break-all и break word

Пояснение

перенос слов: недавно измененное слово-переход перешло на перелив-перенос:break-word

перенесет длинные слова на следующую строку. Устанавливает разные слова, чтобы они не разбивались по середине.

word-break: break-all

независимо от того, является ли это непрерывным словом или множеством слов, разбивает их на границе ограничения ширины.(т. е. даже внутри символов одного и того же слова)

Так что, если у вас есть много диапазонов фиксированного размера, которые получают содержимое динамически, вы можете просто предпочесть использование word-wrap: break-word, поскольку в этом случае только непрерывныйслова разбиваются между ними, и, если это предложение содержит много слов, пробелы корректируются для получения неповрежденных слов (без разрывов внутри слова).

Ссылка: Найти описание этой ссылки

.wordbreak {
  
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
 /* word-break: break-all;  */
word-wrap: break-word;     /* Internet 
  Explorer 5.5+ */

white-space: normal;
}
<div class="content" id='content1'>
  <div class="wordbreak">.................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</div>
  
  <div class="wordbreak">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
  
  <div class="wordbreak">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>
</div>

<div class="wordbreak">Hello its very  very very very very very very very  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very veryvery  very very very very very very long text</div>
...