suspensivos - truncar texto css
multilínea de puntos o guiones de texto subrayado (3)
Debido a que el subrayado de texto CSS solo permite una línea continua y su posición está justo en la parte inferior de las cadenas, estoy usando el borde inferior más un pequeño relleno para lograr un subrayado de texto punteado o discontinuo.
h2{border-bottom:1px dotted #999; padding-bottom:5px;}
ahora, el problema es que cuando el texto del encabezado (o párrafo o cualquier elemento) toma 2 líneas o más, el subrayado punteado simplemente hace lo que hace cada borde, que está en la parte inferior del elemento de bloque. Si uso el estilo de subrayado de texto, el subrayado permanece con el texto, pero el subrayado de texto solo admite una línea continua, y hasta donde sé, no hay relleno.
Entonces, ¿cómo muestro los textos de varias líneas con subrayado de puntos o guiones?
Gracias
También me enfrentaba a un problema similar pero con etiquetas <a>. En mi caso, era una propiedad flotante css la que hacía que el borde apareciera solo debajo de la última línea. Así que adjunté las etiquetas <a> con etiquetas <span> y moví el css float: left a <span>. Se solucionó el problema ahora el borde inferior aparece debajo de todas las líneas cada vez que se enrolla un enlace largo para ajustarse al div que lo contiene.
El estilo css revisado y la estructura HTML son los siguientes:
a { border-bottom:1px dotted red; }
span.nav-link { float:left; }
<span class="nav-link"><a href="some-page">Test link</a></span>
Espero que ayude a alguien.
Gracias,
Un poco "tarde", pero hay una forma con el estilo de decoración de texto y la línea de decoración de texto para personalizar el subrayado en algunos navegadores.
-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;
h2 {
border-bottom: 1px dashed #999;
display: inline;
}
Así que recibes lo que necesitas.
Pero hay que tener en cuenta que <h2> entonces (por supuesto) ya no es un elemento de bloque. Pero puede "evitar" eso poniendo un <h2> en un <div> .