应用“word-break”css 属性后文本对齐受到干扰答案

【问题标题】：Text alignment disturbed after applying "word-break" css property应用“word-break”css 属性后文本对齐受到干扰
【发布时间】：2013-10-03 08:06:39
【问题描述】：

我有一个 div 和大量内容加载到这个 div 中。我应用了一些 CSS 样式来管理 div 宽度：`word-break: break-all; word-wrap: 断字；

但是在应用这个 css 之后，div 对齐被打乱了，因为我注意到一些单词在这之后被截断了。

我的 CSS 是：

width: 98%;
word-break: break-all;
word-wrap: break-word;
text-align: justify;

我不明白如何让justify 将文本与那些 css 对齐，我该如何克服这个问题？谁能建议我使用另一种 CSS 样式来解决这个问题？

See in jsfiddle

谢谢...!!

【问题讨论】：

标签： html css word-wrap text-alignment text-align

【解决方案1】：

HTML 的做法是在你的长词中添加 <wbr> before/after/embedded

wbr:after { content: "\00200B" }

这样做css方式

【讨论】：

它可以工作，但如果内容的空间被删除。请看这个 - jsfiddle.net/94Kq4/2
好的，你将一段文本包装到标签中，它工作正常，但在我的情况下这是不可能的，因为内容太大并且从数据库中获取数据。
将添加到您正在检索的文本中，否则您需要找到不同的解决方案，祝您好运。

【解决方案2】：

这是html代码

<div id="Content">
TestTestTest TestTestTest TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest TestTestTest TestTestTestTest ################################################ TestTestTestTest TestTestTest TestTestTest TestTestTest TestTestTest TestTestTest TestTestTest TestTestTestTest TestTestTest TestTestTestTest TestTestTest TestTestTest TestTestTest TestTestTest TestTestTest TestTestTest TestTestTestTest TestTestTest TestTestTestTest T </div>

这是你的小提琴。单词不要在这里特别是我用来检查的#。请注意不要像按回车那样输入换行符

fiddle

【讨论】：

但我想要：如果内容有一些空格，链接中断比我需要用对齐文本显示它。
空格无关紧要，它不会破坏。并且换行符将出现在您想要的位置。试试小提琴，但使用
而不是按 enter :)

【解决方案3】：

最后，我找到了一些可以帮助我解决问题的 CSS 样式：

CSS：

    width : 440px;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto;
    text-align: justify;

【讨论】：