20

我有以下结构：

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

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

4

5 回答 5

26

您的示例已经自动换行（因为<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/

于 2012-12-09T18:21:06.540 回答
10

对我来说它有效

white-space: initial;

可能对其他人有帮助。

于 2018-10-11T08:02:14.980 回答
4

Normalyp元素是块状的，因此width受到尊重，它应该以 10 像素换行。

见http://jsfiddle.net/ejLmu/

如果它对您不起作用，则意味着您有一些覆盖默认设置的 css 规则。您要么已设置display:inline（在这种情况下不尊重宽度），要么已设置white-space:nowrap;（禁用文本换行）。

于 2012-12-09T18:19:32.183 回答
1

我不知道我确实理解您的问题，但是使用 CSS 您应该尝试：

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

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

overflow: hidden;
于 2012-12-09T18:25:20.267 回答
0

你应该使用

style="width:10px; display: block;"
于 2012-12-09T18:19:16.457 回答