如何讓長文字適合小格子？

Question

我有一個指定寬度的div，但其中的文本沒有分解，並適合相應的div。

這可能是一個錯誤的問題。如何使它適合在div中？

我相信它完全不可能完全適合內部，至少可以根據寬度而不是高度來安裝它。

的CSS

.limit{ 
    width:50px; 
} 

HTML

<div class="limit"> 
    <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p> 
</div> 

JSFIDDLE

Answer 1

所有你需要的是word-wrap: break-word;

.limit{ 
 
    width:50px; 
 
    word-wrap: break-word; 
 
}

<div class="limit"> 
 
    <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p> 
 
</div>

Demo

在另一方面，如果你是不是打破了一句，你也可以使用overflow屬性設置爲auto或overflow-x: scroll; - Demo

Answer 2

修改類的限制。您可以在一行中顯示整個文本。

CSS

.limit p { 
    overflow-x: scroll; 
    white-space: nowrap; 
    width: 50px; 
}