如何使用CSS将表头限制为2行

cld4siwp 于 2022-11-26 发布在其他

关注(0)|答案(2)|浏览(190)

使用white-space:nowrap限制为一行很简单，但我有一个特定的问题，我想强制我的标题文本适合一个特定的宽度。
我已经成功地添加个人风格的元素，以迫使他们的具体2行我想要的，但它似乎不是一个长期的解决方案。
例如：

<table class="table table-hover table-sm text-center">
        <thead>
            <tr>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th style="min-width: 90px">Lorem ipsum dolor sit amet</th>
            </tr>
        </thead>
</table>

我尝试的另一种方法是在文本本身中包含断点，但我也不想通过多个文件来这样做。

<th>Lorem ipsum <br /> dolor sit amet</th>

我也尝试过添加一个外部样式表来强制all的最小宽度为一个值，但这会导致表头之间出现巨大的间隙。
想知道是否有更好的方法来做到这一点。

css

来源：https://stackoverflow.com/questions/74566293/how-to-use-css-to-limit-table-header-to-2-lines

2条答案

按热度按时间

yqlxgs2m1#

您应该在所有标题上使用max-width属性。标题数量乘以所选宽度将等于表格的最大宽度。
这里有一个max-width的例子，根据你的例子，它有6个头，最大值为300px。

thead th {
    max-width: 50px
}

赞(0）回复(0）举报 2022-11-26

t5zmwmid2#

您可以使用css line-clamp属性。
HTML语言

<table class="table table-hover table-sm text-center">
        <thead>
            <tr>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum</span></th>
                <th><span class='table-header-limit'>Lorem ipsum dolor sit amet amet amet Lorem ipsum dolor sit amet amet amet Lorem ipsum dolor sit amet amet amet</span></th>
            </tr>
        </thead>
</table>

CSS

.table-header-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

输出

赞(0）回复(0）举报 2022-11-26

我来回答

如何使用CSS将表头限制为2行

2条答案

相关问题

热门标签

最新问答