How to start a span tag from a new line only if there is a break inside it?

January 25, 2023

I have two spans inside an HTML table cell, first one is title and second one is view-count. Text inside first span is of variable length but the one inside the second span is very small e.g. Views: 1K. I don’t want the text inside the second span to break or wrap on multiple lines. It should always appear as a single block. If there is a break inside the view-count span, e.g. between the words Views: and 1K, entire span should start from a new line. How can I achieve this?

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>

>Solution :

You can prevent the text inside the view-count span from wrapping by setting white-space: nowrap

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>