2

Есть текст в <pre> теге. Слова в тексте не переносятся, а режутся. Я пытаюсь сделать так, чтобы слова переносились целиком, а не по частям. Например, текст "пылесосный пылесосательный пылесос" должен вывести всего первых два слова, а последнее перенести. Вместо этого выходить что-то типа "пылесосный пылесосательный пыл <перенос> есос".

Вот код, который не делает, что мне надо :С

<pre style='hyphens: auto;font-size: 20px;font-family: Times,monospace;white-space: pre-wrap;overflow:auto;
border: 0; background-color: transparent;'> </pre>
5
  • у Вас в <html> указано lang="ru"? 7 фев 2018 в 19:46
  • @humster_spb Да, указано. Но это не суть. Оно все равно режет слова, а мне нужно, чтобы перенос был от последнего пробела. 7 фев 2018 в 19:49
  • В актуальных версиях Chrome и FF приведённый стиль обеспечивает перенос содержимого тега pre по словам. Проблема не воспроизводится. Нужно больше подробностей.
    – Streletz
    7 фев 2018 в 19:53
  • Chrome, кстати, вообще не поддерживает значение auto для hyphens - переносы не работают, слова перемещаются на новую строку целиком 7 фев 2018 в 19:55
  • @Streletz Еще подключен bootstrap. Вполне возможно, что там прописано что-то для <pre> 7 фев 2018 в 20:06

1 ответ 1

2

По умолчанию именно так и работает - перенос по словам.
Если по какой-то причине происходит разрыв слова, то дело в word-break.
Помимо этого, исправить можно одним из следующих способов:

pre {
  white-space: pre-wrap;
  overflow: auto;
  border: 1px dotted red;
  width: 32ch;
  float: left;
  margin: .5em;
  min-height: 7em;
}

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

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

.to-normal {
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
}

pre:before {
  content: attr(class) "\A0\A";
  color: blue;
}
<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre class="break">пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre class="break cancel">пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre class="break to-normal">пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

2
  • Спасибо большое! Все работает как надо :) 7 фев 2018 в 20:31
  • @Danchyg1337, в таком случае надо принять ответ нажатием на галочку слева от него.
    – Qwertiy
    7 фев 2018 в 20:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.