#html #css
Вопрос:
У меня есть два HTML — элемента-один-это div
другой table
. оба они имеют два элемента — div имеет p
и таблица имеет td
. У них обоих один и тот же стиль.
Код:
.container {
display: flex;
flex-direction: row;
}
p, td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px">
Hello world
</p>
</div>
<table style="background-color: green">
<tr width="100px">
<td width="50px">Hello World</td>
<td width="50px">Hello World</td>
</tr>
</table>
И у их родителя есть 100px
ширина. На самом деле, я хочу, чтобы они укорачивались, если их размер переполнялся. Ибо div
я получаю желаемый результат , но в table
, я не получаю тот же результат. почему это происходит? Это потому table
, что имеет другой стиль по умолчанию, чем div
?
Ответ №1:
Это происходит из-за свойства отображения в таблице. Вам нужно указать display: block
, чтобы многоточие работало, но это как бы удаляет то, как должны работать таблицы.
Лучше всего было бы обернуть td
содержимое внутри a div
и изменить CSS.
Вариант 2 будет использовать max-width to your
td`.
<td width="50px">
<div>Hello World</div>
</td>
CSS для:
td>div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px
}
ИЛИ просто добавьте максимальную ширину
.container {
display: flex;
flex-direction: row;
}
p,
td>div,td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px">
Hello world
</p>
</div>
<table style="background-color: green">
<tr width="100px">
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
Hello World
</td>
</tr>
</table>
Ответ №2:
Вместо того, чтобы указывать ширину tr и td, укажите ширину таблицы.
table {
background-color: green;
table-layout: fixed;
width: 100px;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tbody>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</tbody>
</table>
Ответ №3:
Чтобы обрезать текст с многоточием, когда он переполняет ячейку таблицы, вам нужно будет установить свойство CSS максимальной ширины для каждого класса td, чтобы переполнение работало.
.container {
display: flex;
flex-direction: row;
}
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td
{
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px" >
Hello world
</p>
</div>
<table style="background-color: green">
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>