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

Question

我有一个div和大量内容加载到这个div中。我应用了一些CSS样式来管理div宽度：`word-break：break-all;自动换行：break-word;

但在应用这个css后，div对齐受到了干扰，因为我注意到有些单词在此之后被截断了。

我的css是：

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

我不明白如何将justify文本与那些CSS对齐，我如何克服这个问题？ 任何人都可以建议我使用另一种CSS样式来解决这个问题吗？

See in jsfiddle

谢谢... !!

Answer 1

Html执行此操作的方法是在您的长词之前/之后/嵌入<wbr>

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

这样做css方式

Answer 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>    

这是你的小提琴。单词不要在这里特别打破＃我以前检查。请注意，您不要输入新行字符，例如按Enter键

fiddle

Answer 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;