Hay una solución con CSS, aunque es complejo de entender, es fácil de crear.
Para lograr esto, comprende de las siguientes cosas:
height
: altura font-size
: tamaño del texto
line-height
: altura de una casilla remarcada por líneas
- Y las líneas a mostrar
Para lograr esto todos juntos, lo que se me ocurrió y creo que es la única forma, es usar variables.
Por eso dije que es complejo de entender. Las variables se usa para tener una sola declaración para todos lo estilos que quieran usar. Solo edito en un solo lugar, y afecta a todos lo que usan.
Las variables se crea y se usa así:
/* variables para todos */
:root {
--soyAlto: 1000px;
--soyRojo: red;
}
p {
height: var(--soyAlto);
color: var(--soyRojo);
}
Pero también se puede usar independientemente, para un solo estilo:
p {
--soyAlto: 1000px;
--soyRojo: red;
height: var(--soyAlto);
color: var(--soyRojo);
}
En el siguiente ejemplo, está la solución a tu pregunta.
Para obtener 3 líneas de texto, modifica el número de --lineas
.
Lo que pasa en height
es un calculo (calc()
) de las variables:
--size
X --line-height
X --lineas
.
p {
--size: 16px;
--line-height: 1.5;
--lineas: 3;
--paddingV: .30em;
--paddingH: .30em;
width: 300px;
margin: 0 auto;
background-color: rgba(0, 128, 0, 0.5);
display: block;
display: -webkit-box;
height: calc( var(--size) * var(--padding) * var(--line-height) * var(--lineas));
font-size: var(--size);
line-height: var(--line-height);
-webkit-line-clamp: var(--lineas);
padding: var(--paddingV) var(--paddingH);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At rem excepturi perferendis aut aspernatur repudiandae, distinctio veniam! Velit ullam, id odit eos, earum optio cum aliquam eveniet totam accusamus necessitatibus laboriosam labore sed deleniti vero sapiente ex voluptate beatae maxime ipsam expedita quae. Fuga esse, sunt adipisci, hic aut veritatis cumque tempore reiciendis quam, maxime placeat nostrum? Rerum et veritatis mollitia provident dolor debitis temporibus, corporis accusantium maiores iste natus. Velit libero consectetur ipsum quidem? Exercitationem nostrum quidem autem assumenda minus cumque! Itaque illum labore quia voluptatum atque non nam quam molestiae perferendis voluptates pariatur culpa nostrum accusantium, maxime sit.
</p>
Importante
Deves modificar juntamente --line-height: 1.5;
con --paddingV: .30em;
y --paddingH: .30em;
para Obtener el tamaño de padding y separación de las líneas. En otras palabras, no modifiques solamente una cosa, sino, todos juntos; porque todos trabajan juntos. Son variables y calculos.
Esta en tu responsabilidad_