css - significado - elementos de bloque html

Restrinja el ancho del borde al ancho del texto en un elemento de bloque

Question

Tengo un título <h2> en un fijo con <div> (238px). Cuando se representa esta página, el navegador administra saltos de línea en el título para que el texto se ajuste al ancho (238px).

Pero la propiedad de ancho del elemento h2 sigue siendo 238px, sin importar dónde estén los saltos de línea.

Quiero establecer un border-bottom solo debajo del texto, y no debajo del ancho completo del elemento h2, y no sé cómo lograrlo utilizando CSS.

Puedes ver lo que quiero decir aquí: http://jsfiddle.net/np3rJ/2/

Gracias

Answer 1

¿Por qué no intentarlo?

text-decoration:underline

?

EDITAR

Simplemente haga un espacio alrededor de "OPPORTUNITÉS" con el subrayado.

 <h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
    text-decoration:underline
}

Answer 2

Creo que esto es lo que necesitas:

<h2><span>Horizon 2020, nouvelles opportunités<span></h2>

h2 span {
    position: relative;
    padding-bottom: 5px;
}
h2 span::after{
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    border-bottom: 1px solid #000; 
    content: ""
}

Cfr este violín: http://jsfiddle.net/b8cwD/4/

Utilicé la técnica descrita en esta respuesta: Desafío avanzado de CSS: subrayar solo la línea final de texto con CSS

Introduje un span en el H2 para no cambiar el atributo de visualización de él, pero podría usar la misma técnica con una display: inline en su H2.

Answer 3

Esto funciona en Chrome.

h2 {
   width: fit-content;
}

Answer 4

Prueba esto, (creo que te ayudará)

.heading {
    position: relative;
    color: $gray-light;
    font-weight: 700;
    bottom: 5px;
    padding-bottom: 5px;
    display:inline-block;
}

.heading::after {
    position: absolute;
    display:inline-block;
    border: 1px solid $brand-primary !important;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    width: 100%;
}

Answer 5

Si está dispuesto a usar display: table-cell y pseudo-elements, puede tener una solución bastante buena (con algunas limitaciones menores).

El HTML no cambia:

<div class="dossier_titre">
    <h2>Horizon 2020, nouvelles opportunités</h2>
</div>

y puedes aplicar el siguiente CSS:

.zone_33 {
    width: 238px;
    padding: 0px;
    margin: 0px;
}

.zone_33 .dossier_titre {
    margin: 0px 0px 20px 0px;
}

.zone_33 h2 {
    color: #616263;
    font-size: 150%;
    font-weight: lighter;
    padding: 0px 0px 12px 0px;
    background: none;
    border-bottom: 1px solid grey;
    display: table-cell;
    text-transform: uppercase;
}

.zone_33 .dossier_titre:after {
    content: "";
    display: table-cell;
    width: 100%;
}

Para el elemento <h2> , configure display: table-cell , y agregue un pseudo-elemento después de .dossier_titre (el bloque que contiene el elemento de encabezado / título). El pseudo-elemento es también una table-cell y tiene un ancho de 100% (esta es la clave).

Además, como h2 ya no es un elemento de bloque, agregue sus márgenes a .dossier_titre para mantener el espacio visual en nuestro diseño.

Como funciona esto
Estoy creando una tabla de dos celdas con la segunda celda (el pseudo-elemento) que tiene un ancho del 100%. Esto activa el navegador para calcular el ancho de ajuste a ajuste para la primera celda ( h2 ) que contiene el texto del título. El ancho de la primera celda es el mínimo necesario para mostrar el texto. El borde inferior es tan largo como la línea de texto más larga en el bloque de texto dentro de la celda de tabla.

Limitaciones
table-cell no es compatible con IE7 sin un hack, pero la solución es bastante conocida y se puede encontrar si es necesario.

Si el título tuviera muchas palabras cortas, es posible que la línea se rompa en lugares inesperados. Necesitará insertar &nbsp para mantener juntas palabras específicas según sea necesario.

Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/

Answer 6

Tal vez display: inline-block; O display: inline; es lo que necesitas?