CODEWITHSUNDEEP
cssword-wrap
user3314010
user3314010

Reputation: 41

How can i wrap a text via css

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

Upvotes: 2

Views: 115

Answers (5)

Rohan Kalra
Rohan Kalra

Reputation: 1

Try adding 

whitespace: normal;

or try

white-space: pre-wrap;

in your hover.

Upvotes: 0

Alin Mercasi
Alin Mercasi

Reputation: 83

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

Upvotes: 0

Tomas Chudjak
Tomas Chudjak

Reputation: 562

What about using word-break attibute to element?

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

Upvotes: 0

nicael
nicael

Reputation: 18997

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

Upvotes: 0

Ankit
Ankit

Reputation: 1105

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

Upvotes: 1

Related Questions