How can i wrap a text via css

Vote count:

0

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

asked 41 secs ago

user3314010

1

How can i wrap a text via css