@scaardss

Как показать текст, не вместившийся в блок?

Здравствуйте, подскажите, как сделать, чтобы при увеличении высоты блока он не двигал нижестоящие, а показывался поверх них?
Вот как когда сейчас выглядит:
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width: 33%;
        max-height: 100px;
        overflow: hidden;
        border: 1px solid darkmagenta;
        cursor: pointer;
    }
    .wrapper:hover{
        overflow: unset;
        max-height: 10%;
    }
    .box{
        height: 100px;
    }
    .container{
        display: flex;
        flex-wrap: wrap;
    }
</style>


<body>
    <div class="container">
        <div class="wrapper">
            <div class="box">

            </div>
            <div class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
            </div>
        </div>   
        <div class="wrapper">
            <div class="box">

            </div>
            <div class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
            </div> 
        </div>      
        <div class="wrapper">
            <div class="box">

            </div>
            <div class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
            </div>
        </div> 
        <div class="wrapper">
            <div class="box">

            </div>
            <div class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
            </div>
        </div>   
        <div class="wrapper">
            <div class="box">

            </div>
            <div class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
            </div>
        </div>   
        <div class="wrapper">
            <div class="box">

            </div>
            <div class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
            </div>
        </div> 
    </div>      
</body>
</html>
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 2
@historydev
Острая аллергия на анимешников
.text {
  word-wrap: break-word;
}
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Сделать блок с текстом абсолютом https://jsfiddle.net/hp4dcu3j/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы