Menu
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
615
Press ALT+ENTER to insert the line break.
There are 2 main ways to add line breaks: through line break <br> tags and through paragraph tags <p> . So all you have to do is to put those tags in between your tags. There is one semantic correct way to add a line-break, <br> . <p> does the same job, but has another semantic, since it introduces a paragraph.
A line-break can be added in HTML, using only CSS, by employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).
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;
If you were to change the width to 15em like this;
td
{width:15em; border:1px solid red}
then the screen would show this;
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
