CODEWITHSUNDEEP
htmlcss
cclloyd
cclloyd

Reputation: 9205

How to wrap element in CSS not the word

I have a list of span elements in a td with a fixed width.

I want to wrap the span elements, but no the words within the span elements.

So if I have

<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>

I want each span to go to a new line if needed, but not break the span in the middle.

How can I achieve this?

Upvotes: 0

Views: 55

Answers (3)

Brian R
Brian R

Reputation: 35

white-space: nowrap;

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Try this out. I've posted the mozilla link as well.

Upvotes: 0

j08691
j08691

Reputation: 207900

To keep the spans from breaking on the text, add white-space: nowrap; to the rules for your span.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115108

Set your spans to be 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>

Upvotes: 1

Related Questions