我有一个段落中的文本
<p style="width:200px;">Text goes here</p>
我的问题是当文本变得更长(宽度更大)时,它不会换行。相反,文本会溢出段落。如果文本增长,我该如何强制其在新行上继续。
我有一个段落中的文本
<p style="width:200px;">Text goes here</p>
我的问题是当文本变得更长(宽度更大)时,它不会换行。相反,文本会溢出段落。如果文本增长,我该如何强制其在新行上继续。
添加
overflow-wrap: break-word;
到CSS
overflow
或word-wrap
属性的内容。请移除p标签上的宽度,先生。
<p>Text goes here.</p>
<p style="width:200px;white-space:pre;>Lot's of text here that will be wider than 200px</p>
默认情况下,溢出是自动的,这应该会使它换行。也许在其他地方您设置了 overflow: hidden
; 这就是为什么它会这样做的原因。尝试再次设置 overflow:auto
。
<p style="width:100px;"> loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsum </p>
<p style="width:100px; word-wrap:break-word;"> loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsum </p>
Overflow会使文本不可见。
在样式中添加
white-space:wrap;
就可以了。
word-break
属性 是其中一种方法:
<p style="word-break:break-all; width:200px;">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
由于 HTML 中几乎所有的元素都是盒子,因此您可以将“p 标签”固定在其 div 中,如下所示
<p style="position:relative; width:95%; height:whatever%;" > content </p>
你也可以通过使用“CSS左侧或右侧”属性来定位盒子,从而实现文本缩进。
<p style="position:relative; width:95%; height:whatever%; left:20px;" > content </p>