CODEWITHSUNDEEP
htmlcss
Marlon
Marlon

Reputation: 1877

How to set a line break between span elements

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

Upvotes: 7

Views: 20807

Answers (3)

Nigel Alderton
Nigel Alderton

Reputation: 2376

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>

Upvotes: 11

Dryden Long
Dryden Long

Reputation: 10190

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

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

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

Upvotes: 0

Related Questions