Блог

Главная - Вопросы по программированию - переполнение текста: многоточие в таблице не работает

переполнение текста: многоточие в таблице не работает

#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 ?

Демонстрационная версия jsFiddle

Ответ №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>
Метки: