переполнение текста в наклонных контейнерах div - PullRequest
0 голосов
/ 01 июля 2018

В настоящее время я использую clip-path для контейнеров, которые должны быть перекошены.

.box {
  height: 150px;
  line-height: 150px;
  text-align: center;
  background: yellow;
}

#first {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}

#second {
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

#spacing {
  height: 100px;
}
<div id="first" class="box">
  <p>
    first container with a very very very long text. It's really long and won't fit here. Some text may disappear when the screen size gets smaller.
  </p>
</div>

<div id="spacing">
</div>

<div id="second" class="box">
  <p>
    second container with a longer text
  </p>
</div>

Если окно становится меньше, текст не будет разбиваться на новую строку, он просто исчезнет.

Как сделать так, чтобы недостающая часть текста появилась в следующей строке?

Вы можете найти пример того, что я хочу сделать на этой странице

https://www.thenativeweb.io/#

Ответы [ 2 ]

0 голосов
/ 01 июля 2018

«Если окно станет меньше, текст не будет разбит на новую строку, он просто исчезнет». - проблема возникает из-за высоты строки класса блока и необходимо удалить высоту: 150px из класса блока.

.box {
  height: auto;
  line-height: auto;
  text-align: center;
  background: yellow;
  padding: 80px 20px;
}

#first {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}

#second {
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

#spacing {
  height: 100px;
}
<div id="first" class="box">
  <p>
    first container with a very very very long text. It's really long and won't fit here. Some text may disappear when the screen size gets smaller.
  </p>
</div>

<div id="spacing">
</div>

<div id="second" class="box">
  <p>
    second container with a longer text
  </p>
</div>
0 голосов
/ 01 июля 2018

Я считаю, что следующий подход решит вашу проблему. Я удалил определенные height и line-height для #box и добавил padding: 30px 0, чтобы освободить место для клипа. Теперь текст действует более естественно. Вы можете настроить точные значения.

.box {
  height: auto;
  text-align: center;
  background: yellow;
  padding: 30px 0;
}

#first {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}

#second {
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

#spacing {
  height: 100px;
}
<div id="first" class="box">
  <p>
    first container with a very very very long text. It's really long and won't fit here. Some text may disappear when the screen size gets smaller.
  </p>
</div>

<div id="spacing">
</div>

<div id="second" class="box">
  <p>
    second container with a longer text
  </p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...