0

Как скрыть часть содержимого,выступающего за пределы родительского блока без использования свойства overflow? Дело в том что необходимо скрыть выборочно выступающие части content, а элементы span оставить видимыми, они располагаются за пределами container.

.container {
  width: 300px;
  position: relative;
}

.content {
  position: absolute;
  left: -20%;
  Width: 200%;
}

span:first-child {
  position: absolute;
  left: -10%;
  z-index: 100;
}

span:last-child {
  position: absolute;
  right: -10%;
  z-index: 100;
}
<div class="container">
  <span>left</span>
  <div class="content"></div>
  <span>right</span>
</div>

3
  • 1
    Добавить ещё один контейнер
    – Alexey Ten
    28 янв 2019 в 13:18
  • Ну вы бы хоть css привели. 28 янв 2019 в 13:21
  • Вот привёл,посмотрите 28 янв 2019 в 14:42

1 ответ 1

-2

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

Если надо дополнительно позиционировать содержимое контейнера, оберните содержимое в блок с позиционированием. Если надо выровнять кнопки, используйте flex (или другие способы).

.container {
  width: 300px;
  position: relative;
  left: 100px;
  border: 1px solid red;
}

.content {
  width: 100%;
  overflow: auto;
}

span:first-child {
  position: absolute;
  left: -10%;
  top: 0;
}

span:last-child {
  position: absolute;
  right: -10%;
  top: 0;
}
<div class="container">
  <span>left</span>
  <div class="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <span>right</span>
</div>

3
  • Нельзя менять ширину content! Он должен быть шире основного контейнера. Эти выступающие за контейнер излишки должны быть, их просто необходимо скрыть, не скрывая span 28 янв 2019 в 17:09
  • @ArturHan просто добавте обёртку. <div class="wrapper" style="width=100%; overflow: auto;"><div class="content">...</div></div> 29 янв 2019 в 8:36
  • да,пожалуй,так должно получиться.Спасибо! 29 янв 2019 в 16:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.