Браузер WebKit вычисляет неверную ширину элемента - PullRequest
Новая
       33

Браузер WebKit вычисляет неверную ширину элемента

1 голос
/ 05 февраля 2020

Я работаю с текстовым элементом, который должен отображаться вертикально.

Для этого я использую следующее CSS: 

-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

Однако в Chromium (и других Браузеры WebKit) ширина этого элемента вычисляется очень странно.

Для одноразового решения этой проблемы есть много способов:

  • Открыть DevTools (F12), установить фиксированная ширина для этого элемента (width: 1px) и отключение этой опции, все идет нормально.

  • Измените ширину окна на немного меньшую.

  • Поиграйте с меньшим текстом - удалите разрывы строк (<br>), введите больше или меньше текста и т. Д. c.

Не удалось воссоздать те же исправления в JSFiddle. Однако здесь вам нужно понять, что я имею в виду. Попробуйте открыть его в браузере с помощью WebKit и другого движка (например, Firefox) - результаты будут разными.

https://jsfiddle.net/VoG__/qfkgt7m9/7/

Также я использую Debian 8 , но проблема появляется в любой ОС.

В чем проблема? Как я могу исправить эту проблему, используя CSS? 

.content {
  padding: 30px;
  background-color: #bbb;
}
.project-info {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}
.project-info .item {
  border: 3px solid #fff;
  display: flex;
  flex-wrap: nowrap;
}
.project-info .item .heading {
  margin-left: -1px;
  margin-bottom: -1px;
  padding: 10px;
  color: #555;
  font-size: 20px;
  font-family: sans-serif;
  background-color: #fff;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.project-info .item .text {
  padding: 20px;
  font-family: sans-serif;
}
<div class="content">
  <div class="project-info">
    <div class="item">
      <div class="heading">Item long text</div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
    </div>
    <div class="item">
      <div class="heading">Item</div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 06 февраля 2020

Выяснилось, что это как-то связано с переносами строк / переносами слов ...

Итак, первое (необработанное) решение - сохранить весь текст заголовка в одной строке. 

.project-info .item .heading {
  ...
  white-space: nowrap;
}

Однако я все еще ищу правильный ответ, чтобы текст заголовка мог складываться в несколько строк.

...