Свойство CSS word-break: break-all не работает должным образом с определенными символами в Chrome

Я использую "word-break: break-all" для вставки разрывов между любыми символами.
Однако в Chrome он не работает должным образом с определенными символами (например, двоеточие, точка с запятой, запятая), как показано ниже.
( Мой codepen находится здесь: https://codepen.io/yukito/pen/wobZJq)

исходный код:

<style>
  .test {
    width: 300px;
    word-break: break-all;

    /* cosmetic */
    background-color: red;
    margin-bottom: 5px;
  }
</style>

<div class="test">
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</div>

<div class="test">
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
</div>

В FireFox и Safari работает ожидаемо.

Мои вопросы:
. Это ошибка? или спецификация?
. Как разорвать линию между непрерывными точками с запятой в Chrome?

Спасибо.

Обновлять:

«break-word» разрывает строку с учетом границ слов, как это перо: https://codepen.io/yukito/pen/xRNopJ
Я действительно хочу вставлять разрывы между любыми символами, не учитывая границы слов.


google-chrome css word-break
person yukito    schedule 26.12.2016    source источник
comment
Код ссылки codepen отлично работает как в Chrome, так и в Firefox.   -  person aavrug    schedule 26.12.2016
comment
@aavrug У меня это не работает в Opera, и решение, которое я разместил ниже, похоже, исправляет это.   -  person sol    schedule 26.12.2016

Ответы (2)


arrow_upward
1
arrow_downward

Используйте свойство break-word вместо break-all.

Взгляните на фрагмент ниже:

<style>
  .test {
    width: 300px;
    word-break: break-word;
  
    /* cosmetic */
    background-color: red;
    margin-bottom: 5px;
  }
</style>

<div class="test">
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</div>

<div class="test">
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
</div>

Надеюсь это поможет!

person Saurav Rastogi    schedule 26.12.2016

arrow_upward
0
arrow_downward

Для браузеров webkit необходимо добавить:

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

Демо

person sol    schedule 26.12.2016
comment
Спасибо. Но слово break-word разрывает строку с учетом границ слов, как это ручка: codepen.io/yukito/pen/wobZJq< /а> . Я действительно хочу вставлять разрывы между любыми символами, не учитывая границы слов. - person yukito; 26.12.2016
comment
Я думаю, что причина того, что слово «тест» появляется в отдельной строке, может заключаться в том, что вы добавили новую строку после него. См. второе поле здесь: codepen.io/sol_b/pen/LboKGr -- или я непонимание тебя? - person sol; 26.12.2016