html - 风格化 td 元素中的文本

Question

我有一个失败的大表要做。我总是发现很难将它们风格化，所以我可以假设我的是一个基本问题。我有一些 TD，里面有很长的文字。目前表格样式设置为“white-space: nowrap”。

我想要实现的是将这些 td 文本拆分为固定数量的“行”(假设为 3 行)，这样行可能会更高，但单个单元格会更小。

正常空白:

--------
- text -
- text -
- text -
- text -
- text -
--------

空白:nowrap

---------------------------------
- text text text text text text -
---------------------------------

我要:

-------------
- text text -
- text text -
- text      -
-------------

Answer 1

在您的列上指定一个宽度以确定其中容纳多少文本。我创建了一个 JS Fiddle，其中包含 3 个示例:

https://jsfiddle.net/2rhzymwc/

<table class="wrap-width">
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
</table>

.wrap-width td {
  width: 100px;
}

编辑:

关于您的评论，您的意思是指定高度比内容略长吗？或者一个单元格的宽度/高度应该比其他单元格长？目前还不清楚您的要求，请查看以下更多示例:

https://jsfiddle.net/jz8gn8ax/