如何根据 div 宽度进行换行，如果它不是 css 中的长单词，则不应中断该单词答案

【问题标题】：how to make line break based on the div width and should not break the word if it is not a long word in css如何根据 div 宽度进行换行，如果它不是 css 中的长单词，则不应中断该单词
【发布时间】：2014-07-30 10:39:24
【问题描述】：

我需要根据 div 宽度在 div 中换行。 div 宽度是动态的。如果单词不是很长，则不应中断。

我使用了 word-break:break-all 和 word-wrap:break-word。正如我们所料，行是中断的，但单词也是中断的。但我们并没有破坏这个词。

请找到所附图片。 http://i.stack.imgur.com/xJesQ.png

【问题讨论】：

不要添加任何分词属性，句子会在空格处分词
我需要根据 div 的宽度来换行或长字。因为我用了断词
展示一个真实的例子，并准确解释文本应该如何换行。特别是，哪些长词应该换行以及如何换行？
@JukkaK.Korpela 请查看图片i.stack.imgur.com/xJesQ.png中的示例内容。由于单词长，我需要使用分词。如果单词比 div 长，单词应该换行，如果是小单词，则不应换行。

标签： css word-break

【解决方案1】：

尝试使用 css 引导脚手架或响应式列你也可以尝试把div的css做成

width: 100%

【讨论】：

【解决方案2】：

使用word-wrap:break-word -

DEMO

这样，只有宽于整个容器宽度的单词才会中断。

【讨论】：

也用过这个。但话是断的。 Need and used also word-break.
我不明白你需要什么。这有什么问题？看演示，你会发现只有比全宽更宽的单词才会打断。
使用 word-break:break-all;在那个演示中看看会发生什么。单词中断了。
为什么必须使用word-break:break-all; ???这正是导致您的问题的原因！？
必须使用分词，因为我需要根据div的宽度来分行或者长字

【解决方案3】：

是的，它现在正在工作。我在 div 中使用表格，其中有一个 <tr> 和一个 <td>，例如 <div> <table style="table-layout: fixed;width: 100%;word-wrap: break-word;"><tr><td> ....content.... </td></tr></table> </div>。现在换行符根据 div 宽度工作，如果它不是一个长词，也会打破这个词。

【讨论】：

这肯定不是一个优雅的解决方案。