css - titulo - justificar texto html

"Text-align: justify;" elementos de bloque en línea correctamente?

Question

Algunas otras preguntas ya han abordado la mejor forma de aplicar text-align: justify para que los elementos del bloque en línea se distribuyan de manera uniforme ... por ejemplo, ¿cómo justifico * realmente * un menú horizontal en HTML + CSS?

Sin embargo, el navegador le da su propia línea al elemento de 100% de ancho que "borra" la línea de elementos de bloque en línea. No puedo entender cómo deshacerme de ese espacio vertical vacío sin usar line-height: 0; en el elemento padre

Para ver un ejemplo del problema, vea este violín

Para mi solución que usa line-height: 0; , mira este violín

La solución que estoy usando requiere que se aplique una nueva line-height a los elementos secundarios, pero se pierde cualquier line-height previamente establecida. ¿Alguien sabe de una mejor solución? Quiero evitar las tablas para que los elementos se puedan ajustar cuando sea necesario, y también para flexbox porque la compatibilidad con el navegador aún no está allí. También quiero evitar flotadores porque la cantidad de elementos espaciados será arbitraria.

Answer 1

Considera lo siguiente:

.prevNext {
    display: table;
    width: 100%
}

.prevNext a {
    display: table-cell;
    text-align: center
}

(También vea el violín editado .) ¿ Eso es lo que está buscando? La ventaja de esta técnica es que puede agregar más elementos y todos se centrarán automáticamente. Compatible con todos los navegadores web modernos.

Answer 2

Creo que la mejor manera sería crear el elemento seleccionable con una class / id específica y luego asignar float:left o float:right consecuencia. Espero que ayude.

Answer 3

En primer lugar, me gusta el enfoque del pseudo-element para mantener el marcado semántico. Creo que deberías mantenerte con el enfoque general. Es mucho mejor que recurrir a tablas, marcado innecesario o sobre las secuencias de comandos superiores para captar los datos de posicionamiento.

Para todos los estresados ​​por el text-align siendo hacky - ¡vamos! Es mejor que el html sea semántico a expensas del CSS que viceversa.

Entonces, desde mi entendimiento, estás tratando de lograr este efecto de bloque en línea justificado sin tener que preocuparte por restablecer la line-height la line-height cada vez ¿no? Yo sostengo que simplemente agrega

.prevNext *{
    line-height: 1.2;  /* or normal */
}

Entonces puedes ir codificando como si nada hubiera pasado. Aquí está la cita de Paul Irish sobre el * selector si le preocupa el rendimiento:

"... no se te permite preocuparte por el rendimiento de * a menos que concatenes todos tus javascript, lo tienes en la parte inferior, minimizas tus css y js, descomprimes todos tus recursos y comprimes sin pérdida todas tus imágenes. t obtener 90+ puntajes de Page Page, es demasiado pronto para pensar en la optimización del selector ".

¡Espero que esto ayude!

-J Cole Morrison

Answer 4

En su ejemplo tiene line-height:1.2 , sin una unidad. Esto puede causar problemas. Si no está usando bordes, podría darles a los padres y a los niños una line-height de line-height de 0 .

Las otras opciones que puedo pensar son:

1. Use display:table en el elemento principal y display:table-cell en los elementos secundarios para simular el comportamiento similar a una tabla. Y alinea el primer elemento a la izquierda, y el último a la derecha. Mira este fiddle .
2. Usa javascript para contar los nav hijos y luego dales un ancho igualmente distribuido. p.ej. 4 niños, 25% de width cada uno. Y alinee los elementos primero y último a la izquierda y a la derecha respectivamente.
3. Hay una forma de distribuir los elementos de forma equitativa, pero es un método complejo que requiere que algunos espacios sin ruptura se coloquen cuidadosamente en el html junto con un margen negativo y text-align:justify . Podrías probar y adaptar el elemento nav . Ver ejemplo here .

Answer 5

Intentar text-align para este problema es bastante hackish. La propiedad text-align está destinada a alinear el contenido en línea de un bloque (específicamente texto) - no está destinado a alinear elementos html.

Entiendo que estás tratando de evitar las carrozas, pero en mi opinión las carrozas son la mejor manera de lograr lo que estás tratando de hacer.

Answer 6

Según lo establecido por @Scotts, lo siguiente se ha implementado dentro de Chrome, sin la parte -webkit , que realmente me encantó, sobre todo porque tenemos que deshacernos del " -browser-specific-shǐt muy pronto.

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE + Chrome */
}

Nota: Aunque todavía Safari y Opera aún no lo admiten (08-SEPT-16).

Answer 7

Tu violín es terriblemente específico. Me parece que para su caso este CSS funcionaría bien:

.prevNext {
    border: 1px solid #ccc;
    position: relative;
    height: 1.5em;
}

.prevNext a {
    display: block;
    position: absolute;
    top: 0;
}

.prevNext a:first-child {
    left: 0;
    text-align: left;
}
.prevNext a:last-child {
    right: 0;
    text-align: right;
}
​

Answer 8

Actualizó la información de la solución "Futura" a continuación; todavía no totalmente compatible.

Solución actual (IE8 +, FF, Chrome Probado)

Mira este violín.

CSS relevante

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '''';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '''';
    display: inline-block;
    width: 100%;
}

Explicación

La display: block en el elemento :before con el margen inferior negativo tira de las líneas de texto una altura de línea que elimina la línea adicional, pero desplaza el texto. Luego, con la position: relative en los elementos del inline-block en inline-block el desplazamiento se contrarresta, pero sin agregar la línea adicional.

Aunque css no puede acceder directamente a una "unidad" de line-height per se, el uso de em en la configuración de margin-bottom y top se adapta fácilmente a cualquier line-height dada como uno de los valores de multiplicador . Entonces 1.2 , 120% o 1.2em son todos iguales en el cálculo con respecto a line-height , lo que hace que el uso de em una buena opción aquí, incluso si line-height: 1.2 , luego 1.2em para el margin-bottom y top coincidirá. Una buena codificación para normalizar el aspecto de un sitio significa que en algún punto line-height debe definirse explícitamente, de modo que si se utiliza alguno de los métodos multiplicadores, la unidad em equivalente dará el mismo valor que la line-height . Y si line-height se establece en una longitud que no sea de em , como px , que en su lugar podría establecerse.

Definitivamente tener una variable o mixin usando un preprocesador css como LESS o SCSS podría ayudar a mantener estos valores que coincidan con la line-height adecuada, o javascript podría usarse para leer dinámicamente tal, pero en realidad, la line-height la line-height debería conocerse en el contexto de dónde se usa esto, y la configuración apropiada aquí.

ACTUALIZACIÓN para el texto minificado (sin espacios)

El comentario de Kubi señaló que una minificación del html que elimina los espacios entre los elementos <a> hace que la justificación falle . Un pseudoespacio dentro de la etiqueta <a> no ayuda (pero eso se espera, ya que el espacio está sucediendo dentro del elemento de inline-block ), un <wbr> añadido entre las etiquetas <a> no ayuda (probablemente porque break no es necesario para la siguiente línea), por lo que si se desea la minificación, entonces la solución es un carácter de espacio fijo sin interrupción   --otros personajes espaciales como el espacio delgado y el espacio no funcionaron (sorprendentemente).

Al acercarse a una solución limpia de futuro

Una solución en la cual el webkit estaba detrás de los tiempos (al momento de escribir esto) fue:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

Funciona en FF 12.0+ e IE8 + (con errores en IE7).

Para Webkit, a partir de la versión 39 (al menos, podría haberse infiltrado antes), sí lo admite sin la extensión -webkit- pero solo si el usuario ha habilitado las características experimentales (lo que se puede hacer en chrome://flags/#enable-experimental-web-platform-features ). Se rumorea que la versión 41 o 42 debería ver soporte completo. Dado que aún no es soportado sin problemas por webkit , todavía es solo una solución parcial . Sin embargo, pensé que debería publicarlo, ya que puede ser útil para algunos.