Неожиданный перенос текста на div - PullRequest
Новая
       158

Неожиданный перенос текста на div

0 голосов
/ 20 июня 2020

У меня возникла странная проблема с библиотекой, которую я разрабатываю, и она сводится к следующему коду: 

<html>
    <body>
        <div style="position: absolute; left: 200px;">
            <div style="position: absolute; left: 0px; top: 0px">
            Hello some text.
            </div>
            <div style="position: absolute; left: -50px; top: 50px">
            Hello some text.
            </div>
            <div style="position: absolute; left: -100px; top: 100px">
            Hello some text.
            </div>
            <div style="position: absolute; left: -150px; top: 150px">
            Hello some text.
            </div>
            <div style="position: absolute; left: -200px; top: 200px">
            Hello some text.
            </div>
        </div>
    </body>
</html>

Код здесь очень простой: у нас один и тот же текст размещен по-разному div с. Позиция - это все, на что различаются div. Я ожидал, что все пять текстов будут отображаться одинаково, будь то одна строка или несколько строк. Однако в разделах слева нет обтекания текстом, а в блоках справа есть.

Такое поведение соответствует Chrome 83 и Firefox 77 и Edge 83.

Похоже, виноват отрицательный левый, потому что если я их удалю, он будет отображаться последовательно (я не могу этого сделать в реальном приложении, хотя с учетом того, как эти смещения рассчитываются). 

<html>
    <body>
        <div style="position: absolute; left: 0px;">
            <div style="position: absolute; left: 200px; top: 0px">
            Hello some text.
            </div>
            <div style="position: absolute; left: 150px; top: 50px">
            Hello some text.
            </div>
            <div style="position: absolute; left: 100px; top: 100px">
            Hello some text.
            </div>
            <div style="position: absolute; left: 50px; top: 150px">
            Hello some text.
            </div>
            <div style="position: absolute; left: 0px; top: 200px">
            Hello some text.
            </div>
        </div>
    </body>
</html>

Это ошибка во всех этих браузерах? Или это как-то логично?

Актуальный рендеринг: actual

Expected rendering: ожидается

Ответы [ 3 ]

2 голосов
/ 20 июня 2020

Код не работает для вас по причине

Код, который не работает в вашем случае, связан с тем, что только первый дочерний элемент div сам находится внутри родительского div, потому что свойство left это zero, тогда как остальные div's выходят за пределы родительского div, потому что вы даете им свойство negative left.


enter image description here

If I try to insert another i-e second number div by giving it left property of 50px it will behave normally because it will be treated as a member of its parent div.

image 

<div style="position: absolute; left: 0px;">
  <div style="position: absolute; left: 200px; background-color:red; top: 0px">
    Hello some text.
  </div>
  <div style="position: absolute; left: 150px; top: 50px;  background-color:red;">
    Hello some text.
  </div>
  <div style="position: absolute; left: 100px;  background-color:green; top: 100px">
    Hello some text.
  </div>
  <div style="position: absolute; left: 50px;  background-color:green; top: 150px">
    Hello some text.
  </div>
  <div style="position: absolute; left: 0px;  background-color:green; top: 200px">
    Hello some text.
  </div>
</div>

Но все же, если вы хотите найти решение, не возясь со свойством left, width:100% - это то, что вам нужно, тогда: 

<div style="position: absolute; left: 200px;">
  <div style="position: absolute; left: 0px; top: 0px; width:100%;">
    Hello some text.
  </div>
  <div style="position: absolute; left: -50px; top: 50px; width:100%;">
    Hello some text.
  </div>
  <div style="position: absolute; left: -100px; top: 100px; width:100%;">
    Hello some text.
  </div>
  <div style="position: absolute; left: -150px; top: 150px; width:100%;">
    Hello some text.
  </div>
  <div style="position: absolute; left: -200px; top: 200px; width:100%;">
    Hello some text.
  </div>
</div>
0 голосов
/ 20 июня 2020

Вы можете настроить размер ширины вашего div элемента таким образом, чтобы весь текст переносился одинаково. Следующий код должен работать, если вы хотите, чтобы ваш текст занимал 3 строки: 

div {
  width: 50px;
}

Если вы хотите, чтобы текст занимал более 2 строк, используйте вместо этого width: 100px.

Если если вы хотите, чтобы текст занимал более 2 строк, используйте вместо этого width: 150px.

0 голосов
/ 20 июня 2020

Для вашего div установите ширину, и они останутся такими, как ожидалось.

...