Могу ли я переместить поле «Переполнение скрыто» без перемещения содержимого? - PullRequest
Новая
       32

Могу ли я переместить поле «Переполнение скрыто» без перемещения содержимого?

0 голосов
/ 16 ноября 2018

Я просто пытался скрыть части содержимого с помощью коробки. 

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: gray;
  overflow: hidden;
}

.contents {
  position: absolute;
  padding: 50px;
}
<div class="box">

  <div class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem blanditiis, tempora corporis est vero doloribus quos odit mollitia fugiat dolorem? Accusamus, maiores. Temporibus quidem quia dignissimos repellat inventore aperiam perspiciatis!asd</div>

</div>

Мой вопрос: возможно ли, чтобы я переместил только положение ящика и зафиксировал содержимое в той же позиции?

enter image description here

1 Ответ

0 голосов
/ 16 ноября 2018

Вы должны стилизовать текст, чтобы достичь своей цели, попробуйте это: Если вы добавите обертку-div, вы можете использовать .wrapper, чтобы установить ширину, высоту и положение всего объекта. С дочерним div .box вы можете определить ширину, высоту и положение вашего цветного фона (в вашем примере это желтый), а с помощью последнего вложенного div .contents вы можете определить ширину и высоту вашего текста в блоке. 

.wrapper {
  background-color:gray;
  position:absolute;
  width:500px;
  height:300px;
}

.box{
  position:relative;
  left: 30px;
  top:30px;
  
  background-color:yellow;
  width:250px;
  height:250px;
  
  overflow:hidden;
}

.contents{
  width:50px;
  border: solid 1px red;
  word-wrap: break-word ;
}
<div class="wrapper">
  <div class="box">
    <div class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem blanditiis, tempora corporis est vero doloribus quos odit mollitia fugiat dolorem? Accusamus, maiores. Temporibus quidem quia dignissimos repellat inventore aperiam perspiciatis!asd</div>
  </div>
</div>
...