CSS текст переполняет отступы, когда высота не установлена - PullRequest
Новая
       44

CSS текст переполняет отступы, когда высота не установлена

0 голосов
/ 19 февраля 2019

Я сталкиваюсь с проблемой при попытке дополнить элемент div с помощью overflow: hidden двумя дочерними элементами div, когда содержимое переполняет нижнюю часть отступа, если родительский элемент не имеет установленной высоты, несмотря на установленную максимальную высоту,Кроме того, использование overflow: hidden в дочернем элементе div приводит к тому, что он действует как display: inline-block, когда содержимое не обтекает своего родного брата, то есть float: left.Ниже приведен пример моего примера.

Описательное описание примера примера

Итак, два моих главных вопроса: есть ли способ достичь child div (.content) растет до тех пор, пока не достигнет максимальной высоты родительского элемента без перерегулирования, в первую очередь для того, чтобы дочерний элемент div был скрыт дополнением родительского элемента?И имеет значение overflow: hidden для .content, которое должно вызывать странное поведение .content при переносе текста или это ошибка? 

.wrapper {
  max-height: 150px;
  /* height: 150px; /* Required for .content to get correct height. Why isn't max-height sufficient? */
  overflow: hidden;
  padding: 25px;
  border: 1px solid #000;
}

.left {
  float: left;
  border: 1px solid #000;
}

.content {
  /* height: 100%; /* Doesn't do anything if the parent has no height set. */
  max-height: 150px; /* Resolves not being able to inherit the parent's height. */
  overflow: hidden; /* <- Required to hide overflow text but causes odd text wrapping behavior. */
}
<div class="wrapper">
  <div class="left">
  Left
  </div>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa. 
  </div>
</div>

Редактировать:

Я понял, что могу переместить значение максимальной высоты в дочерний элемент div, нотекст все еще странно переносится из-за правила overflow: hidden.Я хочу верить, что это ошибка, но я не уверен.

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019 

    .wrapper {
      max-height: 150px;
      height: 150px; /* Required for .block to get correct height. Why isn't max-height sufficient? */
      overflow: hidden;
      padding: 25px 25px 0; /*use this padding values remove bottom value*/
      border: 1px solid #000;
    }

    .left {
      float: left;
      border: 1px solid #000;
    }

    .content {
      height: 100%;
      overflow: hidden; /*according to your requirements Remve overflow: hidden */
    }
according to your requirements Remove `overflow: hidden` from content
    <div class="wrapper">
      <div class="left">
      Left
      </div>
      <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa. 
      </div>
    </div>
0 голосов
/ 19 февраля 2019

Попробуйте это:

.wrapper {
  overflow: auto;
  padding: 25px;
  border: 1px solid #000;
}

.left {
  float: left;
  border: 1px solid #000;
}

.content {
  display: block;
  overflow: auto;
 /* Required but causes inline-block behavior? */
}
::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}
<div class="wrapper">
  <div class="left">
  Left
  </div>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa. 
  </div>
</div>
...