css word wraps可以包裹整个单词，而不会打断它们？
css word wraps可以包裹整个单词，而不会打断它们？
提问于 2014-05-01 18:42:31
我需要适合一个大约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>回答 2
Stack Overflow用户
发布于 2015-10-21 17:40:57
我就是在摆弄这个。人们也没有提到设置分词风格。默认的分词规则必须将单词换行到容器空间的末尾，但不能保持单词的完整性。
因此，CSS中问题的解决方案是：
pre{
white-space: pre-wrap;
word-break: keep-all; /*this stops the word breaking*/
}编辑:我对此做了进一步的修改，因为我使用的是bootstrap，所以它们的样式似乎与pre标签有很大的不同。使用!important关键字覆盖它们的样式。
Stack Overflow用户
发布于 2018-03-06 08:51:17
您可以用<span>标签将单词括起来，然后添加white-space: nowrap或display: inline-block。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23406112
复制相关文章
相似问题