Question

我有<div>个max-width，100px;设置为<div>在div>内，我有一个小字的短段。在第二个＆lt; 100px;我有比<div>更长的单词然后#para{ max-width: 100px; text-align:justify; text-justify:inter-word; }超过限制。是否有任何特定的属性来解决这个问题？在此先感谢。

CSS代码：

<body>
<div id='para'>This para div works fine with max- width property when short words are used</div>
<br/>
<div id='para'>But when long words are used, Like thiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiis It does not render correctly</div>
</body>

HTML code：

{{1}}

的jsfiddle

http://jsfiddle.net/ShamalSandeep/D2YdA/

Answer 1

您可以将word-break:break-all添加到CSS中，这会破坏最终位于元素边缘的每个单词。或者使用word-wrap: break-word来打破长话。

#para{
    max-width: 100px;
    text-align:justify; 
    text-justify:inter-word;
    word-break: break-all;
    /*Or word-wrap: break-word;*/
}

<强> Demo with word-break

<强> Demo with word-wrap

CSS max-width属性无法正确呈现

1 个答案: