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

Question

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

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

但它们看起来会更好地显示为

Item<br>
1

在Item和之间强制中断1

编辑：width是 190 像素。

我不能使用 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具有较小的宽度并以这种方式强制下一行的数字。但是对于所有项目，文本必须同样长。

但是，您可以使用 javacript 来完成。通过使用显示块将文本和数字包装在标签中 - 或<br>在两者之间添加标签。

Answer 3

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

像这样的东西：

li {
  word-spacing: 190px;
}

不确定是否有另一种方法可以在不更改标记的情况下实现此目的。

Answer 4

You can set a small width on the li elements, effectively forcing line wrapping. If the content is really “Item 1” etc., or generally two words, you can set a very small width, forcing each word on a line of its own, e.g.:

li { width: 1em; }

However, I cannot see a reason why such rendering would be an improvement, and I suspect the real problem is somewhat different.