时间戳

首页 > 解决方案 > 如何在 CSS 中包装元素而不是单词

html - 如何在 CSS 中包装元素而不是单词

问题描述

我有一个固定宽度的span元素列表。td

我想包装跨度元素，但没有跨度元素中的单词。

所以如果我有

<td>
    <span>bind</span>
    <span>defaults</span>
    <span>nofail</span>
    <span>x-systemd.requires=zfs-mount.service</span>
    <span>bind</span>
    <span>defaults</span>
    <span>nofail</span>
    <span>x-systemd.requires=zfs-mount.service</span>
</td>

如果需要，我希望每个span人都换一个新行，但不要打破中间的跨度。

我怎样才能做到这一点？

标签： htmlcss

解决方案

将您的跨度设置为display:inline-block

span {
  display: inline-block;
  border: 1px solid green;
}

td {
  border: 1px solid red;
}
<table>
  <tr>
    <td>
      <span>bind</span>
      <span>defaults</span>
      <span>nofail</span>
      <span>x-systemd.requires=zfs-mount.service</span>
      <span>bind</span>
      <span>defaults</span>
      <span>nofail</span>
      <span>x-systemd.requires=zfs-mount.service</span>
    </td>
  </tr>
</table>

推荐阅读