Establecer una longitud máxima de caracteres en CSS
Estoy creando un sitio web responsivo para la escuela y mi pregunta es:
¿Cómo configuro una longitud máxima de caracteres para las oraciones (con CSS) en mi sitio web (como 75 caracteres) de modo que cuando tengo una pantalla muy grande, las oraciones no superen los 75 caracteres?
Probé un ancho máximo pero eso estropea mi diseño. Estoy usando flexbox y consultas de medios para que responda.
Siempre puedes usar un método de truncamiento configurando un max-widthdesbordamiento ellipsiscomo este
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
Un ejemplo:
.wrapper {
padding: 20px;
background: #eaeaea;
max-width: 400px;
margin: 50px auto;
}
.demo-1 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.demo-2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 150px;
}<div class="wrapper">
<p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>
<div class="wrapper">
<p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>Para un truncamiento de varias líneas, consulte una flexsolución. Un ejemplo con truncamiento en 3 filas.
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Un ejemplo:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>
Hay un 'valor de longitud' CSS de ch.
Desde MDN
Esta unidad representa el ancho, o más precisamente la medida de avance, del glifo '0' (cero, el carácter Unicode U+0030) en la fuente del elemento.
Esto puede aproximarse a lo que busca.
p {
overflow: hidden;
max-width: 75ch;
white-space: nowrap;
}<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>
Pruebe esto para truncar caracteres después de configurarlo en ancho máximo. He usado 75 canales en este caso.
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 75ch;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>Para truncar varias líneas, siga el enlace.
Un ejemplo: https://codepen.io/srekoble/pen/EgmyxV
Usaremos webkit css para esto. En resumen, WebKit es un motor de renderizado de navegador web HTML/CSS para Safari/Chrome. Esto puede ser específico del navegador, ya que cada navegador está respaldado por un motor de renderizado para dibujar la página web HTML/CSS.
