CSS-div расширяется для многострочного текста по сравнению с однострочным текстом - PullRequest
Новая
       33

CSS-div расширяется для многострочного текста по сравнению с однострочным текстом

0 голосов
/ 01 апреля 2019

Я пытаюсь показать текст в граничном div, расположенном в абсолютном месте внутри другого div.

Вариант 1 с width: auto; - fiddle: https://jsfiddle.net/c21kt6r4/ Проблема в том, что левая боковая коробка слишком сильно расширяется.

enter image description here

Вариант 2 - с ширина: минимальное содержимое; fiddle: https://jsfiddle.net/ay159rw6/2/ Проблема заключается в том, что текст в правой части окна переносится.

enter image description here

Что такое чистый способ переноса текста в divи показать правильную границу как в многострочном, так и в однострочном тексте?

Для справки: html: 

<div class="main">
  <div class="item" style="left:0;">
      <label>SHAMPOO & CONDITIONER</label>
  </div>
  <div class="item" style="left:165px;">
      <label>WHAT EVER</label>
  </div>
</div>

И CSS: 

.main{
 position:relative;
 border:solid black 1px;
 width:400px;
 height:400px; 
}
.item{
  border:solid blue 1px;
  width:160px;
  height:150px;
  position: absolute;
}
.item label{
  position:absolute;
  bottom:5%;
  left:5%;
  border:solid red 1px;
  padding:5px;
  display:inline-block;
  font-size:12px;
  width:min-content;
}

Ответы [ 2 ]

2 голосов
/ 01 апреля 2019

Выполните следующие действия.

1) Вам нужно деформировать ярлык внутри элемента div и затем дать ему position:absolute. Также вам нужно использовать right:5%, чтобы задать интервал с обеих сторон слева. Мы заключаем в div, потому что мы хотим, чтобы позиция относительно делила, мы применяем свойство table cell .

2) Вам необходимо display: table-cell; тег ярлыка .item label

3) Дайте word-break: break-all; ваш ярлык-метку .item label, чтобы слово могло занимать все пространство

Вот рабочая демонстрация: https://jsfiddle.net/o5dgzn0c/

Демонстрационное изображение.

Надеюсь, это поможет!

1 голос
/ 01 апреля 2019

Я бы посоветовал вам перейти с max-width здесь, потому что это ограничит максимальную ширину элемента элемента некоторым значением и сохранит возможность включать width:auto ширину элемента для всех элементов, меньших его, что-то вроде: 

.item label{
  position:absolute;
  bottom:5%;
  left:5%;
  border:solid red 1px;
  padding:5px;
  display:inline-block;
  font-size:12px;
  width:auto;
  max-width:100px;
}

Однако я бы остановился на подходе JS, поскольку вы не представляете, какой текст может появиться.

...