7

I have a HTML table, wich one of the columns will contain a long line of text. But some pieces of this text need to have different font colors, so i divide this text into a series of span elements, so i can format each one accordingly. The problem is that i can make the text wrap inside this cell, its expanding the TD size to fit the elements.

I don't need the text inside each span to break, but when the elements reach the end of the TD element, i want the next span to be arranged in the next line.

Does anyone there know how can i do that?

A example to illustrate:

Source:

<table>
   <tr>
      <td>
          <span>Sample Text A</span>
          <span>Sample Text B</span>
          <span>Sample Text C</span>
          <span>Sample Text D</span>
          <span>Sample Text E</span>
          <span>Sample Text F</span>
      </td>
   </tr>
</table>

This is the desired output:

This is the limit of the TD element =============>|
Sample Text A Sample Text B Sample Text C 
Sample Text D Sample Text E Sample Text F

This is the result i'm getting:

This is the limit of the TD element =============>|
Sample Text A Sample Text B Sample Text C Sample Text D Sample Text E Sample Text F
1

3 Answers 3

11

If you make the span an inline-block you will get the behaviour you want;

span
  {display:inline-block}

Then set the width of the table cell to 20em like this;

td
  {width:20em; border:1px solid red}

(The red border is just so you can see what's going on.)

The screen will look like this;

capture

If you were to change the width to 15em like this;

td
  {width:15em; border:1px solid red}

then the screen would show this;

enter image description here

FYI here's the HTML I used for the screen captures;

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <table>
       <tr>
          <td>
              <span>Sample Text A</span>
              <span>Sample Text B</span>
              <span>Sample Text C</span>
              <span>Sample Text D</span>
              <span>Sample Text E</span>
              <span>Sample Text F</span>
          </td>
       </tr>
    </table>
  </body>
<html>
1
  • This appears to disallow a browser search through the boundary however. Alternative option includes inserting <wbr> element.
    – user202729
    Jul 9, 2022 at 12:51
1

You can try either:

td {
  word-break:break-all;
}

or

td {
  word-wrap:break-word;
}

Then, assigning a width to the td as well as setting table-layout:fixed; to the table itself should force the words to wrap when they hit the width of the table cell.

Fiddle #1 | Fiddle #2

0

Use table-layout:fixed on the <table> to force strict width handling, then explicitly set your desired width on the table cell.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.