Я хочу добиться приведенного ниже дизайна, в котором текст обтекает заголовок и обрезается многоточием после второй строки.

Desired result


Я мог добиться усечения с помощью flexbox и зажима строки, но не могу обернуть текст вокруг заголовка.

enter image description here

Фрагмент ниже:

#container {
  max-width: 500px;
  display: flex;
}
#header {
  background-color: lightgreen;
}
#text {
  background-color: lightblue;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
<div id="container">
  <span id="header">Ad</span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

Я пытался использовать float, но использование display: -webkit-box; заставляет текст вести себя как блочный элемент и не обтекает заголовок.

enter image description here

Фрагмент ниже:

#container {
  max-width: 500px;
}
#header {
  background-color: lightgreen;
  
  float: left;
}
#text {
  background-color: lightblue;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
<div id="container">
  <span id="header">Ad</span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

Есть какие-нибудь указатели на то, как я могу усечь текст, а также обернуть заголовок? Спасибо.

2
Gautham 16 Июл 2020 в 18:49

1 ответ

Лучший ответ

Вы пробовали просто переместить зажим строки на родительский объект и разрешить дочерним элементам быть встроенными?

#container {
  max-width: 500px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
}

#header {
  background-color: lightgreen;
}

#text {
  background-color: lightblue;
}
<div id="container">
  <span id="header">Ad</span>
  <span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
2
myf 16 Июл 2020 в 16:12