Как сделать, чтобы был перенос по слову, а не по элементу списка? (как на картинке)
.list {
width: 180px;
margin: 0;
padding: 15px;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid #ccc;
box-sizing: border-box;
}
.item {
margin-right: 10px;
display: inline-block;
position: relative;
}
.item::after {
content: "";
display: block;
background-color: #828EA5;
width: 2px;
height: 2px;
border-radius: 50%;
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
}
.item:last-child {
margin-right: 0;
}
.item:last-child::after {
content: none;
}
.text {
margin: 0;
font-size: 16px;
line-height: 18px;
}
<ul class="list">
<li class="item">
<p class="text">
some text here
</p>
</li>
<li class="item">
<p class="text">
longer text
</p>
</li>
</ul>
<wbr>
или­
.