Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

89
Vistas
How to make 2 html elements related by height

I need your help, I have 2 html elements h3 and p

<h3>Samsung Galaxy F22 launched in India: Price, features, other details</h3>
<p>Samsung Galaxy F22 has been launched in India. The new smartphone has been priced in the mid-range segment. The new smartphone is powered by a MediaTek chipset and features a high refresh rate AMOLED display.</p>

These 2 elements are located in a container limited in height and width (w: 376, h: 191)

I use css to automatically add to h3 and p dots at the end

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

What is the main question, how to change the -webkit-line-clamp of the p element depending on the height\the number of rows of h3?

I need if h3 accepts 2 newline, then only 1 newline should be allowed in p, but if there is only 1 newline in h3, then 2 should be used in p so that there are always no more than 5 lines in total.

I tried to indicate in the screenshot exactly what I need enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

If I'm not talking nonsense, I think it's not possible to assign a css with such a condition.

But it is surely possible with a plugin/library. But in pure html and css it is not possible.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda