css自动换行包裹整个单词而不打破它们?

Edd*_*ddy 27 html css word-wrap

我需要将长文本放入约300像素的宽度.我正在使用这个css:

 div {      
      width: 300px;
      color:white;
      word-wrap:break-word;
      }
Run Code Online (Sandbox Code Playgroud)

我的问题是word-wrap:break-word;.它正在破坏单词中间的单词.但我需要的是让文字保持原样,并使文件足够聪明,在适当的时候打破界限,并保持文字本身完好无损.

那可能吗?我尝试了所有选项,word-wrap但没有任何作用.要么段落没有中断,文字不在屏幕上,要么单词中断,一些字母在一行中,而其他字母在下一行中.

编辑:添加我的代码以形成一个具体的例子.我的整个style元素:

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    word-wrap:break-word;
}

pre {white-space:break;}

</style>
Run Code Online (Sandbox Code Playgroud)

然后在body元素中:

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    ???? 3 ????? ????? ????? ?????????? ??? ???? ????? ??????? ?????? ?–2.5 ?????? ???, ?????? ?? ??? ????? ?–2.195 ?????? ???? - ??? ?? 12% ??? ????? ?????? ????? ??????. ????????, ???? 4 ????? ????? ???? ???? ????? ?????? ?–1.6 ?????? ??? ?????? ?–40% ???? - 950 ??? ??? ????.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Gol*_*rol 34

你不需要做任何特别的事情.通常文本会在单词之间中断.

如果那不会发生,那么

  1. 要么容器太宽
  2. 容器被明确设置为不会在空格上中断.例如,如果它是一个<pre>元素,或者有css white-space:pre;white-space:nowrap;.
  3. 文本包含不间断的空格(&nbsp;)而不是普通的空格.

解决方案:使用

white-space: pre-wrap;
Run Code Online (Sandbox Code Playgroud)

它会使元素表现得像一个pre元素,除了它在行太长时也会包装.另见:http: //css-tricks.com/almanac/properties/w/whitespace/


dav*_*rke 28

我正在搞乱这件事.人们也没有提到设置分词风格.默认的分词规则必须将单词包装在容器空间的末尾,但不保持单词完整.

所以CSS中你的问题的解决方案是:

pre{
    white-space: pre-wrap;
    word-break: keep-all; /*this stops the word breaking*/
}
Run Code Online (Sandbox Code Playgroud)

编辑:我正在进一步搞乱这个,因为我正在使用bootstrap,他们的造型似乎很多混乱预标签.使用!important关键字覆盖其样式.

  • Keep-all是保持单词整体所需的额外线条.+1 (4认同)

JAT*_*T86 5

您可以使用<span>标签将单词包裹起来并添加white-space: nowrapdisplay: inline-block