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"? Commented 7 февр. 2018 в 19:46
  • @humster_spb Да, указано. Но это не суть. Оно все равно режет слова, а мне нужно, чтобы перенос был от последнего пробела. Commented 7 февр. 2018 в 19:49
  • В актуальных версиях Chrome и FF приведённый стиль обеспечивает перенос содержимого тега pre по словам. Проблема не воспроизводится. Нужно больше подробностей.
    – Streletz
    Commented 7 февр. 2018 в 19:53
  • Chrome, кстати, вообще не поддерживает значение auto для hyphens - переносы не работают, слова перемещаются на новую строку целиком Commented 7 февр. 2018 в 19:55
  • @Streletz Еще подключен bootstrap. Вполне возможно, что там прописано что-то для <pre> Commented 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
  • Спасибо большое! Все работает как надо :) Commented 7 февр. 2018 в 20:31
  • @Danchyg1337, в таком случае надо принять ответ нажатием на галочку слева от него.
    – Qwertiy
    Commented 7 февр. 2018 в 20:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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