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

时间:2014-05-01 10:42:31

标签: html css word-wrap

我需要将长文本放入约300像素的宽度。我正在使用此css

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

我的问题在于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>

然后在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>

4 个答案:

答案 0 :(得分:32)

你不需要做任何特别的事情。通常情况下,文字会在单词之间断开。

如果没有发生,那么

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

    white-space: pre-wrap;
    

    它会使元素的行为类似于pre元素,除非它在行太长时也会换行。也可以看看: http://css-tricks.com/almanac/properties/w/whitespace/

答案 1 :(得分:25)

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

因此CSS解决您的问题的方法是:

pre{
    white-space: pre-wrap;
    word-break: keep-all; /*this stops the word breaking*/
}

编辑: 我正在进一步搞乱这个问题,因为我正在使用bootstrap,他们的造型似乎很多都与pre tag混乱。使用!important关键字覆盖其样式。

答案 2 :(得分:1)

注意:: 确保您的数据不像...... word&nbsp;word&nbsp;word或Chrome以外的浏览器会认为它只有一个字

听起来很疯狂,但我们公司的移动应用程序中的一个错误正在执行此操作,直到我检查了我们的API数据,我认为互联网已经崩溃:p

答案 3 :(得分:1)

您可以使用<span>标记来换行,并添加white-space: nowrapdisplay: inline-block