html - 文本比最大宽度表列宽

标签 html css width css-tables

我有一张 table ,正在使用 <col>指定列宽。我的问题是设置为 5% 宽度的列之一有一个 16 个字符的标题,比分配的 5% 更宽并使列宽度更宽。如何让标题以适当的宽度换行并遵守 5% 的宽度?我希望表格能够响应并且不想以像素为单位设置宽度。我尝试了一个连字符来打破它并将文本换行,但连字符不利于屏幕阅读器。

最佳答案

使用“vw”元素(视口(viewport)宽度)、“vh”(视口(viewport)高度)、“vmin”(vw 或 vh 中较小的一个)、“vmax”(vw 或 vh 中较大的一个)等。

1 v = 包含 block 的 1%

使用它看起来像这样:

p {font-size: 2vw;}

这些值是一个大小单位,就像 px 或 em 一样,因此它也可以用于调整其他元素的大小,例如宽度、边距或填充。

以防万一它不起作用,请使用类似...

p {font-size: 16px; font-size: 2vw;}

或者你可以使用 word-wrap: break-word;这将使它流到下一行

关于html - 文本比最大宽度表列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31882465/

相关文章:

html - 引导列未在 div 的中心排列

html - CSS - 如何将 <h1> 和 <h2> 标签包裹在 float 的 div 周围

jquery - 特定表格的行和列的CSS

android - Android PhoneGap 移动应用程序中的水平滚动条

html - 我怎样才能用 html 和 css 使 div 一个在另一个下面?

javascript - 向没有类的元素添加类 - jQuery

javascript - 我的 html 文件不会链接到位于父目录中的样式表和 javascript

css - 如何让一个 DIV 在 IE8 中成为正确的宽度?

jquery - FlexSlider 2 - 无法制作全宽、左右空白

css - 使用CSS时 Canvas 会拉伸(stretch),但具有“width”/“height”属性的普通 Canvas