How can i wrap a text via css

Question

i am trying to wrap a long text inside a table but facing the problem that the long text overlaps other content.

Example:

table td {
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow:ellipsis;
}

table td:hover {
    overflow: visible;
}

<table>
    <thead>
        <tr>
            <th>Headline 1</th>
            <th>Headline 2</th>
            <th>Headline 3</th>
        </tr>  
    </thead>
    <tbody>
        <tr>
            <td>Bet at home</td>
            <td>10</td>
            <td>80%</td>
        </tr> 
        <tr>
            <td>MOSER 2384 Schermaschine Moser</td>
            <td>20</td>
            <td>40%</td>
        </tr> 
        <tr>
            <td>Bg24 Single 600x120</td>
            <td>30</td>
            <td>50%</td>
        </tr> 
    </tbody>    
</table

Is there a way to avoid this maybe by adding a non transparent background to the content? How can i handle this problem?

Regards, Kai

Why not just get rid of the line where you TELL it not to wrap?: white-space: nowrap; — Dave
– Dave, Commented Mar 29, 2015 at 17:59
Jumpy but have you tried to add white-space normal or pre-wrap; — Roko C. Buljan
– Roko C. Buljan, Commented Mar 29, 2015 at 18:00

Ankit · Accepted Answer · 2015-03-29 18:00:10Z

1

Just add whitespace:normal in your hover.

table td {
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow:ellipsis;
}

table td:hover {
    overflow: visible;
    white-space: normal;
}

<table>
    <thead>
        <tr>
            <th>Headline 1</th>
            <th>Headline 2</th>
            <th>Headline 3</th>
        </tr>  
    </thead>
    <tbody>
        <tr>
            <td>Bet at home</td>
            <td>10</td>
            <td>80%</td>
        </tr> 
        <tr>
            <td>MOSER 2384 Schermaschine Moser</td>
            <td>20</td>
            <td>40%</td>
        </tr> 
        <tr>
            <td>Bg24 Single 600x120</td>
            <td>30</td>
            <td>50%</td>
        </tr> 
    </tbody>    
</table

answered Mar 29, 2015 at 18:00

Ankit

1,1051 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3314010 Over a year ago

Could be a solution but it would be nice to avoid a new line on hover.

user3314010 Over a year ago

It would be nice if there is no new line when hovering and the long text also should not overlap the other content. So when the long text is shown on hover it should be readable.

Ankit Over a year ago

no new line and do not overlap the other columns. It means your column size should change that would not be very good. Instead use a tool tip. Design the tool tip so that it differs from the one you are already using.

nicael · Accepted Answer · 2015-03-29 18:02:25Z

0

I wouldn't do anything on hover (i.e. remove table td:hover). Because when you set overflow to hidden, by default a tooltip is already displayed when you hover, which shows you the full text - it is significally easier to read than if you expand and move the table rows by expanding some of them.

table td {
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow:ellipsis;
}

<table>
    <thead>
        <tr>
            <th>Headline 1</th>
            <th>Headline 2</th>
            <th>Headline 3</th>
        </tr>  
    </thead>
    <tbody>
        <tr>
            <td>Bet at home</td>
            <td>10</td>
            <td>80%</td>
        </tr> 
        <tr>
            <td>MOSER 2384 Schermaschine Moser</td>
            <td>20</td>
            <td>40%</td>
        </tr> 
        <tr>
            <td>Bg24 Single 600x120</td>
            <td>30</td>
            <td>50%</td>
        </tr> 
    </tbody>    
</table

answered Mar 29, 2015 at 18:02

nicael

19.1k13 gold badges65 silver badges93 bronze badges

1 Comment

user3314010 Over a year ago

The tooltip/title-attribute is already used by other informations, so cant be used for the long text.

Tomas Chudjak · Accepted Answer · 2015-03-29 18:04:27Z

0

What about using word-break attibute to element?

table td{      
    word-break: break-all;
}

answered Mar 29, 2015 at 18:04

Tomas Chudjak

5623 silver badges11 bronze badges

Comments

Alin Mercasi · Accepted Answer · 2015-03-29 19:10:47Z

0

I-m not sure if that is what are you looking for , but I couldn't find another solution

table td:hover {
    overflow: visible;
    max-width:100%;
}

fiddle here

edited Mar 29, 2015 at 19:10

answered Mar 29, 2015 at 18:11

Alin Mercasi

8310 bronze badges

Comments

Stewartside · Accepted Answer · 2015-03-29 22:08:58Z

0

Try adding

whitespace: normal;

or try

white-space: pre-wrap;

in your hover.

edited Mar 29, 2015 at 22:08

Stewartside

21k13 gold badges64 silver badges82 bronze badges

answered Mar 29, 2015 at 18:02

Rohan Kalra

12 bronze badges

Collectives™ on Stack Overflow

How can i wrap a text via css

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related