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

Question

我有一个 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 样式来解决这个问题吗？

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

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

小提琴

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;