Question

我有以下结构：

<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>

当p的文本超过10px限制时，我希望它继续在新的行中。我该怎么做？感谢

Answer 1

您的示例已经是自动换行（因为<p>已经是一个块元素），如果您想要破解单词，那么您可以尝试：

p.letters {
    word-wrap: break-word;
}

以下是一个基本的工作示例：http://jsfiddle.net/G9z5M/（请参阅下面的更新）。

你可以使用各种技巧来玩它：

/* Wraps normally, on whitespace */
p.words {
    word-wrap: normal;
}    

/* Hides non-wrapped letters */
p.hidden {
    overflow: hidden;
}

/* Outputs a single line, doesn't wrap at all */
p.nowrap {
    white-space: nowrap;
}

请参阅更新的小提琴：http://jsfiddle.net/G9z5M/1/

Answer 2

Normaly p元素是阻塞的，因此width被尊重，它应该以10像素包裹。

请参阅http://jsfiddle.net/ejLmu/

如果它不适合您，则表示您有一些覆盖默认设置的css规则。您已设置display:inline（，在这种情况下宽度不受尊重）或white-space:nowrap;（禁用文本换行）。

Answer 3

对我来说有效

white-space: initial;

也许对其他人有帮助。

Answer 4

你应该使用

style="width:10px; display: block;"

Answer 5

我不是我明白你的问题，但使用CSS你应该尝试：

word-break: break-all; // normal; // keep-all;

如果你想隐藏额外的内容：

overflow: hidden;

<p>当文字超出宽度时，继续新行</p>

5 个答案: