我需要将长文本放入约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>
你不需要做任何特别的事情。通常情况下,文字会在单词之间断开。
如果那不会发生,那么
<pre>
元素,或具有css white-space:pre;
或white-space:nowrap;
。
)而不是普通空格。解决方案:使用
white-space: pre-wrap;
它会使元素表现得像一个pre
元素,除了它在行太长时也会包装。另见:http://css-tricks.com/almanac/properties/w/whitespace/
我正在搞乱这件事。人们也没有提到设置分词风格。默认的分词规则必须将单词包装在容器空间的末尾,但不保持单词完整。
所以CSS中你的问题的解决方案是:
pre{
white-space: pre-wrap;
word-break: keep-all; /*this stops the word breaking*/
}
编辑:我正在进一步搞乱这个,因为我正在使用bootstrap,他们的造型似乎很多混乱预标签。使用!important关键字覆盖其样式。
注意::确保您的数据不像.. word word word
或Chrome以外的浏览器认为它的单词
听起来很疯狂,但我们公司的移动应用程序中的一个错误是这样做,直到我检查了我们的API数据,我认为互联网已经崩溃:p
你可以用<span>
标签包装这个单词并添加white-space: nowrap
或display: inline-block
。