css的自动换行可以包装整个单词而不会破坏整个单词吗？ [英] css word wrap that wraps whole word without breaking them?
问题描述
我需要将一个长文本调整为大约300像素的宽度。我正在使用此 css ：
I need to fit a long text to a width of about 300 pixels. I'm using this css:
div {
width: 300px;
color:white;
word-wrap:break-word;
}
我的问题是 word-wrap：break -word; 。单词中间是断字。但是我需要使这些词保持原样，并且使文档足够聪明，以便在适当的时候中断换行，并使这些词本身保持完整。
My issue is with the word-wrap:break-word;. It's breaking words in the middle of the word. But what I need is to have the words stay as they are, and for the document to be smart enough to break the line when appropriate, and keep the words themselves intact.
有可能吗？我尝试了自动换行的每个选项，但没有任何效果。要么段落没有中断并且文本停留在屏幕之外，要么单词中断并且几个字母在一行中，而其他字母在下一行中。
Is that possible? I tried every option of word-wrap but nothing works. Either the paragraphs are not breaking and the text stays off screen, or the words break and a couple of letters are in one line, while other letters are in the following line.
编辑：添加我的代码以形成具体示例。我整个 style 元素：
adding my code to form a concrete example. My entire style element:
<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>
推荐答案
您不需要做任何特别的事情。通常情况下，文字会在单词之间中断。
You don't need to do anything special. Normally the text will break between words.
如果没有发生，那么
- 这两个容器也太宽
- 已将容器明确设置为完全不中断空格。例如，如果它是
< pre>元素，或者具有csswhite-space：pre;或white-space：nowrap;。 - 文本包含不间断空格（
& nbsp;
- either the container is too wide
- the container is explicitly set to not break on spaces at all. For instance if it is a
<pre>element, or has the csswhite-space:pre;orwhite-space:nowrap;. - the text contains non-breaking spaces (
) instead of normal spaces.
解决方案：使用
white-space: pre-wrap;
它将使元素的行为类似于 pre 元素，不同之处在于当行过长时它也会换行。另请参阅：
http://css-tricks.com/almanac/properties / w / whitespace /
It will make the element behave like a pre element, except it also wraps when the line is too long. See also:
http://css-tricks.com/almanac/properties/w/whitespace/
这篇关于css的自动换行可以包装整个单词而不会破坏整个单词吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
