Использование line-clamp для родителя, обрезать текст у child

Question

Есть такая необходимость с помощью line-clamp обрезать текст. Но нюанс что неизвестно сколько в родителя попадут абзацев и сколько строк в каждом будет, поэтому хотелось отслеживать строки у родителя, но у родителя это свойство получается не будет работать?

                    <div class="html__content">
                        <p>
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского 
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского
                            И нет сомнений, что активно развивающиеся страны третьего мира
                        </p>
                        <p>
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского 
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского
                            И нет сомнений, что активно развивающиеся страны третьего мира
                        </p>
                        <p>
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского 
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского
                            И нет сомнений, что активно развивающиеся страны третьего мира
                        </p>
                    </div>

на примере хотелось бы в html__content обрезать текст на 8 строке уже. Но текст находится у детей. Если обращаться только к детям и обрезать на 4й строке то получается будет 2 места с многоточием у первого и второго абзаца. Вопрос в том можно ли как то применить данное свойство именно к родителю? То есть 5 строк от первого <p> и 3 строки от второго. Или этот вопрос по другому решается?

Answer 1

Только если сделать абзацы inline-элементами:

.html__content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow:hidden;
}
.html__content p {
  display: inline;
}
.html__content p::after {
  content:'\00000a'; 
  white-space: pre-wrap;
}

<div class="html__content">
  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>

<p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>

<p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
</div>

Answer 2

А ты перед тем как задать вопрос, проверял? У меня всё работает:

main {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}

<main>
  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>

  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>

  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
</main>

БЛОГ НА HUSL

Использование line-clamp для родителя, обрезать текст у child

Ответы (2 шт):