How to wrap element in CSS not the word

Question

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?

https://stackoverflow.com/questions/38056482/wrap-entire-span-on-new-line-if-doesnt-fit — epascarello, Feb 24 '21 at 16:31

score 1 · Answer 1 · answered Feb 24 '21 at 16:28

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>

score 1 · Answer 2 · answered Feb 24 '21 at 16:29

1

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

answered Feb 24 '21 at 16:29

j08691

204,283
31
260
272

score 0 · Answer 3 · answered Feb 24 '21 at 18:07

0

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.

answered Feb 24 '21 at 18:07

Brian R

35
3

How to wrap element in CSS not the word

3 Answers3