將文字換行

Question

我在顯示div中p的內容時遇到問題。 如果我的p太長，我希望將其細分為新的一行。 但是現在，它一直在延伸。 我如何解決它顯示為div中的塊？ 謝謝。

 .box { position: relative; width: 25%; padding-bottom: 25%; background: #fff; } .boxInner { position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; overflow: hidden; } .boxInner img { width: 100%; } .boxInner .titleBox { background: #000; background: rgba(0, 0, 0, 0.9); color: #FFF; padding: 10px; text-align: center; height: 42%; position: absolute; display: block; } .titleBox1 { top: 0; left: 0; right: 0; } .titleBox2 { bottom: 0; left: 0; right: 0; } 

 <div class="box"> <div class="boxInner"> <div class="titleBox titleBox1" > <p> asdasdasdasdddddddddasdddddddddddddddddddd </p> </div> <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> <div class="titleBox titleBox2">An old greenhouse</div> </div> </div>> 

Answer 1

您的p元素內容為asdasdasdasdddddddddasdddddddddddddddddddd ，其中不包含任何允許的斷點。 您需要定義可能在何處以及如何破壞它，然后插入零寬度空格或軟連字符。 如果您需要幫助，則應在p元素中發布對真實內容的描述（以實際示例為例），並指定可以打破其內容的原則。

Answer 2

在CSS類中添加一些內容

p {word-wrap：break-word; 寬度：100px; }

我認為如果不在CSS中設置寬度，自動換行就無法正常工作。