Текст Chrome не переносится в таблицу при использовании :: before - PullRequest
Новая
       1

Текст Chrome не переносится в таблицу при использовании :: before

0 голосов
/ 24 января 2019

В Chrome я вижу переполнение текста вместо переноса в ячейки таблицы при использовании ::before для содержимого внутри ячейки.Кажется, что ::before - это триггер, без него все будет как обычно.Я не вижу этого в Firefox или IE / Edge.

Ниже приведен очень упрощенный пример.В системе, в которой я работаю, я не могу изменить HTML, только CSS.

Использование display: inline-block на label исправляет перенос, но заставляет зеленое поле больше не отображаться встроенным(обернутая линия будет выравниваться справа от зеленого поля, а не слева).Я пытаюсь найти способ сделать Chrome простым переносом, как это делают другие браузеры.

Firefox и IE / Edge

Firefox and IE/Edge

Chrome

enter image description here

table {
  font-size: 40px;
  width: 350px;
  border: 1px solid blue;
}

td {
  border: 1px solid red;
}

label {
  padding-left: 1em;
  position: relative;
}

label::before {
  border: 1px solid green;
  content: "";
  height: 1em;
  width: 1em;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
}
<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td><label>text A</label></td>
      <td><label>text B</label></td>
      <td><label>text C</label></td>
    </tr>
  </table>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 24 января 2019

Хорошо, я перепутал браузеры.Теперь я уверен, что был в Chrome, той же версии, что и у вас: 

label::after {
  content: "";
  display: block;
  height: 1em;
  position: absolute;
  z-index: -1;
  border: 1px solid green;
  width: 1em;
  top: 0;
  left: 0;
}

То же PEN обновлено

0 голосов
/ 24 января 2019

Самый простой ответ в основном включает удаление кода, который является моим любимым видом ответа.

  1. Полное удаление базовых label стилей
  2. Измените :before, чтобы оно имело статическое позиционирование по умолчанию. Поскольку он больше не позиционируется абсолютно, мы также можем удалить правила позиционирования.
  3. Я сделал :before inline-block, чтобы он реагировал на вертикальное выравнивание и сохранял текст label правильно выровненным. 

table {
  font-size: 40px;
  width: 350px;
  border: 1px solid blue;
}

td {
  border: 1px solid red;
}

label:before {
  content: '';
  border: 1px solid green;
  height: 1em;
  width: 1em;
  display: inline-block;
  vertical-align: top;
}
<table>
  <tr>
    <td><label>text A</label></td>
    <td><label>text B</label></td>
    <td><label>text C</label></td>
  </tr>
</table>

CSS потеря веса

До: 22 строки

После: 16 строк

https://jsfiddle.net/tn7hbv8z/3/

0 голосов
/ 24 января 2019

Только что добавлено отображение: таблица

РЕДАКТИРОВАНИЕ: Изменена метка: до и добавлено отображение: встроенный блок

спасибо Temani Afif за ваш вклад. 

table {
  font-size: 40px;
  width: 350px;
  border: 1px solid blue;

}

td {
  border: 1px solid red;

}

label {
  position: relative;
  display:table;
}

label::before {
  border: 1px solid green;
  content: "";
  height: 1em;
  width: 1em;
  display: inline-block;
}
<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td><label>text A</label></td>
      <td><label>text B</label></td>
      <td><label>text C</label></td>
    </tr>
  </table>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...