У меня есть список с текстом, который нужно вырезать в каждом элементе, но когда я делаю
white-space: nowrap;
, элемент растягивается и появляется горизонтальная полоса прокрутки.Как вписать вырезанный текст в?
.wrapper {
display: flex;
flex-direction: row;
}
.wrapper-column {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid #00f;
}
.main-header {
position: sticky;
top: 0;
height: 70px;
border: 1px solid #f0f;
background-color: #fff;
}
.main-content {
height: 1000px;
padding: 15px 25px;
border: 1px solid #000;
}
.sidebar {
position: sticky;
top: 0;
box-sizing: border-box;
flex-shrink: 0;
height: 100vh;
width: 250px;
border: 1px solid #0ff;
}
.content-section {
border: 1px solid #b22222;
}
.content {
padding: 5px;
}
.content-list {
box-sizing: border-box;
display: flex;
flex-direction: row;
padding: 7px 20px;
margin: 0;
height: 40px;
border: 1px solid #3cb371;
list-style: none;
}
.content-list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width:0;
}
<div class="wrapper">
<aside class="sidebar"></aside>
<div class="wrapper-column">
<header class="main-header"></header>
<main class="main-content">
<section class="content-section">
<div class="content">
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem libero aspernatur voluptatem, voluptate voluptas enim voluptatibus tempore amet expedita excepturi facere, possimus debitis nam earum!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ratione tempore sint! Suscipit rerum facilis consequuntur, sequi aliquam reiciendis, in quia fugiat nostrum, numquam vel.</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit porro facilis numquam culpa illum amet minima, delectus accusantium consectetur cumque repellendus id officia laudantium odio!</li>
</ul>
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nam praesentium a hic, molestias ipsam sed nulla, non, quaerat necessitatibus unde. Similique quod illum consequatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quo adipisci iusto accusantium sed laboriosam officiis placeat eaque veniam animi, facere mollitia repudiandae rerum alias.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint, architecto beatae esse culpa deleniti quaerat hic, blanditiis provident natus quam doloribus voluptatibus similique ea!</li>
</ul>
<ul class="content-list">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tempore laudantium voluptatem dolor quod harum facilis voluptas consectetur minus, nulla, excepturi illum exercitationem eos ipsum!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam eveniet debitis, voluptatibus velit, quo aut quos magnam consequatur natus quisquam dicta quidem, illo ipsa.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolor ipsa, numquam veritatis ut mollitia distinctio. Magnam nobis expedita asperiores dolorum eaque sapiente, tenetur quisquam!</li>
</ul>
</div>
</section>
</main>
</div>
</div>
https://jsfiddle.net/nz7ubw2p/