Есть текстовые блоки c фоновой заливкой. При переносе строк сбоку внутри блока образуются пустые пространства [не отступы!]. Как их убрать?
Был произведен поиск соответствующих css-свойств. Нечто похожее на достижение цели было width: min-content — но в таком случае все блоки сжимаются до минимальной ширины.
Мои предположения решения:
Актуально как бы вычислить видимую ширину текста и задать ее для каждого блока. Получается что у каждого текстового блока будет своя ширина.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Trim</title>
<style>
.container {
display: block;
width: 100%;
float: left
}
.text {
font-size: 17px;
line-heigth: 20px;
color: #fff;
background-color: blue;
max-width: 188px;
display: inline-block;
margin-bottom: 1px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
Quisque malesuada placerat nisl. Nulla consequat massa quis enim!
</div>
</div>
<div class="container">
<div class="text">
Placerat nisl. Nulla consequat Wo.
</div>
</div>
<div class="container">
<div class="text">
Hi
</div>
</div>
<div class="container">
<div class="text">
Normal space
</div>
</div>
</body>
</html>
Что скажете? Какие есть идеи?)