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 具有较小的宽度并强制下一行的数字。但是对于所有项目，文本必须同样长。

但是你可以用javacript来做。通过在带有显示块的标签中包装文本和数字 - 或者在其间添加<br>标签。

Answer 3

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

这样的事情：

li {
  word-spacing: 190px;
}

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

Answer 4

您可以在li元素上设置较小的宽度，从而有效地强制换行。如果内容实际上是“第1项”等，或者通常是两个单词，则可以设置一个非常小的宽度，将每个单词强制在一行中，例如：

li { width: 1em; }

然而，我看不出为什么这样的渲染会有所改善的原因，我怀疑真正的问题有些不同。

强制字符串在HTML / CSS中断

4 个答案: