CODEWITHSUNDEEP
htmlcsshtml-table
Luca Calabrese
Luca Calabrese

Reputation: 67

Stylize text in td elements

I have a failty big table to do. I always found difficult in stylizing them so I can assume mine is a basic question. I have some TDs with fairly long text in it. Currently the table style is set with "white-space: nowrap".

What I want to achieve is to split these td text into a fixed number of "lines" (let's say 3) so the row may be taller mut the single cell is somewhat smaller.

white space normal:

--------
- text -
- text -
- text -
- text -
- text -
--------

white-space: nowrap

---------------------------------
- text text text text text text -
---------------------------------

I want:

-------------
- text text -
- text text -
- text      -
-------------

Upvotes: 1

Views: 127

Answers (1)

Alex
Alex

Reputation: 2780

Specify a width on your columns to determine how much text to fit in there. I have created a JS Fiddle with 3 examples of how this works:

https://jsfiddle.net/2rhzymwc/

<table class="wrap-width">
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
</table>

.wrap-width td {
  width: 100px;
}

EDIT:

With respect to your comment, do you mean longer as in specifying the height to be slightly longer than the content? Or that the width/height of one cell should be longer than the others? It is quite unclear what you are asking for, check out these further examples:

https://jsfiddle.net/jz8gn8ax/

Upvotes: 1

Related Questions