Перенос слов в тексте html, css

257

09 февраля 2018, 19:02

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

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

<pre style='hyphens: auto;font-size: 20px;font-family: Times,monospace;white-space: pre-wrap;overflow:auto;
border: 0; background-color: transparent;'> </pre>

Answer 1

По умолчанию именно так и работает - перенос по словам.
Если по какой-то причине происходит разрыв слова, то дело в 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>