在HTML/CSS中强制字符串中断

Question

我有一个由无序列表中的项目组成的导航栏:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

但是如果显示为

会更好看

Item<br>
1

在Item和1之间有强制中断

编辑:width为190px。

我不能使用HTML添加<br>标签。理想情况下，我正在寻找一种使用CSS的方法。

Answer 1

假设你的标记是这样的:

<ul>
    <li><span class="title">Item</span> <span class="number">1</span></li>
    <li><span class="title">Item</span> <span class="number">2</span></li>
    <li><span class="title">Item</span> <span class="number">2</span></li>
</ul>

然后你要做的是得到每个<span>在它自己的行。这很简单。

.title, .number {
    display: block;
}

由于每个<span>现在是一个块，它们将采用容器的全宽度作为默认值

Answer 2

你不能只使用css(如果你不能改变标记)。你只能让ul有一个小的宽度，并强制下一行的数字。但是，所有条目的文本长度必须相等。

你可以用javascript来做。要么用显示块将文本和数字包装在标签中，要么在中间添加<br>标签。

Answer 3

您可以尝试使用word-spacing。显然，190像素对应于父宽度值。你也可以给它一个更大的值，这样后面的单词就不会有足够的位置，强制使用换行。

像这样:

li {
  word-spacing: 190px;
}

不确定是否有另一种方法可以在不改变标记的情况下实现这一点

Answer 4

您可以在li元素上设置一个小宽度，有效地强制行换行。如果内容确实是"Item 1"等，或者通常是两个单词，你可以设置一个非常小的宽度，强制每个单词在自己的一行上，例如:

li { width: 1em; }

然而，我看不出为什么这样的呈现会是一种改进，我怀疑真正的问题有些不同。