Как я могу обернуть текст с помощью css

Я пытаюсь обернуть длинный текст внутри таблицы, но столкнувшись с проблемой, что длинный текст перекрывает другой контент.Как я могу обернуть текст с помощью css

Пример:

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

Есть ли способ, чтобы избежать этого, может быть, добавив нон прозрачным фоном к контенту? Как я могу справиться с этой проблемой?

С уважением, Кай

источник

2015-03-29 user3314010

@Nit парить второй пункт. – nicael

Почему бы просто не избавиться от линии, в которой вы ее не переворачиваете ?: 'white-space: nowrap;' – Dave

Jumpy, но вы пытались добавить 'white-space''' normal' или 'pre-wrap;' –

Просто добавьте whitespace:normal в вашем парении.

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

источник

2015-03-29 18:00:10 Ankit

Может быть решением, но было бы неплохо избежать новой строки при наведении. – user3314010

@ user3314010 как вы хотите, чтобы его показывали? – Ankit

Было бы неплохо, если бы новая строка не зависала, а длинный текст также не должен перекрывать другой контент. Поэтому, когда длинный текст отображается при наведении, он должен быть доступен для чтения. – user3314010

я не сделал бы ничего на парении (т.е. удалить table td:hover). Поскольку, когда вы устанавливаете overflow в hidden, по умолчанию всплывающая подсказка отображается, когда вы наводите курсор, что показывает полный текст - это значительно легче читать, чем если вы расширяете и перемещаете строки таблицы, расширяя некоторые из них.

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

источник

2015-03-29 18:02:25 nicael

Атрибут tooltip/title уже используется другими сведениями, поэтому его нельзя использовать для длинного текста. – user3314010

Попробуйте добавить

whitespace: normal;

или попробовать

white-space: pre-wrap;

в вашем наведении.

источник

2015-03-29 18:02:32

Как насчет того, чтобы использовать слово-брейк для элемента?

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

источник

2015-03-29 18:04:27

I-м не уверен, если это то, что вы ищете, но я не мог найти другое решение

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

fiddle here

источник

2015-03-29 18:11:24

Как я могу обернуть текст с помощью css

ответ

Смежные вопросы