css 如何仅在新行中有断点时才从新行开始span标记？

col17t5w 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(85)

我在一个HTML表格单元格中有两个span，第一个是title，第二个是view-count。第一个范围内的文本长度可变，但第二个范围内的文本非常小，例如Views: 1K。我不希望第二个范围内的文本在多行中中断或换行。它应该始终显示为单个块。如果在view-count范围内有一个断点，例如在单词Views:和1K之间，整个范围应该从新行开始。我如何实现这一点？

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
width: 100%
}

td {
width: 25%
}

.view-count {
 color: white;
 background-color: rgb(150, 150, 150);
 padding: 0 3px;
 border-radius: 4px
}

<!DOCTYPE html>
<html>

<body>

<table>
  <tr>
  <td>
    <span class="title">Variable length title.</span>
    <span class="view-count">Views: 2K</span>
  </td>
  <td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
  </tr>
  <tr>
  <td>
    <span class="title">Variable length title. Bit longer.</span>
    <span class="view-count">Views: 2K</span>
  </td>
  <td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
  </tr>
  <tr>
  <td>
    <span class="title">Variable length title. A little longer.</span>
    <span class="view-count">Views: 2K</span>
  </td>
  <td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
  </tr>
</table>

</body>
</html>

css

来源：https://stackoverflow.com/questions/75230606/how-to-start-a-span-tag-from-a-new-line-only-if-there-is-a-break-inside-it

1条答案

按热度按时间

5gfr0r5j1#

通过设置white-space: nowrap，可以防止view-count范围内的文本换行

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
width: 100%
}

td {
width: 25%
}

.view-count {
 color: white;
 background-color: rgb(150, 150, 150);
 padding: 0 3px;
 border-radius: 4px;
 white-space: nowrap;
}

<!DOCTYPE html>
<html>

<body>

<table>
  <tr>
  <td>
    <span class="title">Variable length title.</span>
    <span class="view-count">Views: 2K</span>
  </td>
  <td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
  </tr>
  <tr>
  <td>
    <span class="title">Variable length title. Bit longer.</span>
    <span class="view-count">Views: 2K</span>
  </td>
  <td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
  </tr>
  <tr>
  <td>
    <span class="title">Variable length title. A little longer.</span>
    <span class="view-count">Views: 2K</span>
  </td>
  <td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
<td>
  <span>Test string</span>
  </td>
  </tr>
</table>

</body>
</html>

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何仅在新行中有断点时才从新行开始span标记？

1条答案

相关问题

热门标签

最新问答