Diseño una gran cantidad de elementos web simples de una sola página para ventas o correo electrónico. A menudo encuentro problemas con los titulares y mis saltos de línea deseados en diferentes anchos de medios.
Por ejemplo, podría tener un titular como:
¡Nuestro nuevo thingamabob es lo mejor desde el pan rebanado!
Sin ninguna atención a los saltos de línea, los saltos de línea son los siguientes:
¡Nuestro nuevo thingamabob es lo mejor desde
el pan rebanado!
A tamaño completo de la web, me gustaría romper la línea después de "the". Creando dos líneas.
¡Nuestro nuevo thingamabob es lo
mejor desde el pan rebanado!
Para una pantalla con un ancho medio, me rompería dos veces:
¡Nuestro nuevo thingamabob
es lo mejor
desde el pan rebanado!
Para pantallas aún más estrechas, me rompería después de "nuevo", después de "thingamabob" y después de "thing". Creando cuatro líneas.
¡Nuestro nuevo
thingamabob
es lo mejor
desde el pan rebanado!
Yo realmente no quiero usar las etiquetas de saltos ( <br>
), porque eso duro-conjuntos de los descansos en todos los tamaños. Hasta ahora he utilizado preguntas de los medios y los porcentajes de anchura para las diversas h1
- h5
etiquetas de modo que la anchura de las fuerzas de la etiqueta un descanso. Pero esto me parece "hacky" (también es muy temperamental a veces basado en el texto real).
¿Cuál es la mejor manera de controlar los saltos de línea sin codificarlos en el html?
La mejor práctica es reconocer que no tienes un control real sobre los saltos de línea en la web y que es mejor diseñar teniendo esto en cuenta.
Cualquier solución al contrario, invariablemente, tendrá que ser hacky. Como será un truco ya que HTML no se adhiere a los saltos de línea definidos por el usuario fuera de la codificación rígida. Podrías hacerlo con JS con bastante facilidad. Configure sus puntos de ruptura con tramos vacíos con clases únicas y luego, según el tamaño de la ventana gráfica, podría inyectar etiquetas BR en cada SPAN deseado.
Hay algunos estilos CSS que funcionarán en los navegadores más nuevos para controlar la forma en que el navegador maneja el ajuste de línea, pero aún así no le dará el control exacto que está buscando en esta situación.
Por otro lado, si su objetivo no es tanto controlar los saltos de línea específicos, sino asegurarse de que su bloque de texto se 'apile' en filas relativamente uniformes, establecería el ancho del DIV de manera diferente para cada ventana gráfica. No será perfecto, pero probablemente sea bastante cercano y podría ser el mejor compromiso.
fuente
Hay un complemento jquery para eso, Balance Text .
Es un complemento creado por Adobe
text-wrap: balance;
creado junto con la propuesta de Adobe para obtener una opción CSS que simplemente haría esto como la función Balance Ragged Lines de Adobe InDesign (suena genial, pero incluso si se acepta, pasarán años antes de que los navegadores lo admitan).El complemento, sin embargo, funciona en este momento. Equilibra cualquier elemento que tenga la clase
balance-text
, o al usar jQuery como$('.some-elements').balanceText();
Aquí hay una demostración oficial de Adobe , utilizando texto justificado .
Aquí hay una demostración que hice usando
<h1>
s - alineado a la izquierda edite para ver el código. Esto muestra algunas de las limitaciones al momento de escribir:En demostración 4 verá cómo cualquier cosa dentro de su bloque de texto equilibrado como un
<a>
enlace,<span>
S o énfasis como<em>
,<strong>
,<b>
,<i>
etc consigue quitado.Además, al comparar las demostraciones 1, 2 y 5, verá que parece que necesita usar tanto la clase CSS como la llamada jQuery.
Parece moderadamente confiable pero a veces tiene fallas: al momento de escribir, ocasionalmente se desliza hacia arriba cuando está en una columna lateral, dejando huérfanos solitarios (pero parece funcionar el 95% del tiempo y todavía no lo he visto deslizarse excepto cuando está en una columna lateral), y por razones inexplicables, mis demos no funcionan en Firefox, pero las demos de Adobe sí (bien en IE9 +, no puedo probar en IE8 en este momento). Si lo usa, tenga en cuenta el tiempo de prueba.
fuente
Tengo que lidiar con esto de manera regular, con aportes de diseñadores que desean que las cosas se rompan de cierta manera. He encontrado que la forma más sencilla de hacer esto es poner un espacio con una clase dentro del texto, y luego hacer que ese espacio sea
display: block;
para las consultas de los medios.Entonces se vería algo así:
Entonces tendría CSS con algo como esto:
Todavía tienes que pasar y refinarlo para asegurarte de que las cosas se rompan como quieres para todos los anchos.
Si es un problema frecuente, puede crear su propio conjunto de clases de salto de línea en Twitter Bootstrap o cualquier sistema de cuadrícula que esté utilizando, modelando los nombres de clase después de cualquier convención de nomenclatura que esté utilizando.
fuente
Puede usar JavaScript para detectar el ancho de la pantalla y escribir la versión correcta (con <br> como la tiene en su publicación) en un div vacío a través de innerHTML.
Desafortunadamente, los "saltos web deseados" y las "mejores prácticas web" no van de la mano. Deja de lado tu deseo perfeccionista de poner cada palabra en el lugar correcto: hay demasiadas posibilidades de pantalla y demasiados lectores que no tienen la mentalidad de diseñador, incluso debes preocuparte por los saltos de línea en sus títulos. Busque Diseño web adaptable para comprender mejor estos problemas.
fuente
Mi método actual ...
Y el CSS:
Los anchos a veces necesitan algún ajuste basado en el texto real que se utiliza, pero este es el esquema general que uso. Esencialmente reduciendo el ancho de la
h1
etiqueta para que la línea se rompa donde quiero que se rompa.Esto funciona, solo requiere una prueba exhaustiva para garantizar que se produzcan interrupciones donde se desee. Pero, en cualquier caso, se necesitan pruebas exhaustivas. Entonces, no es necesariamente más trabajo en ese sentido.
fuente
margin: 0 auto; text-align: center;
solo una vez fuera de una consulta de medios y se aplicará a todos ellosPuede agregar
white-space: nowrap
y colocar<wbr>
en los lugares donde desea permitir saltos de línea. Si esto no es suficiente y desea un control preciso con consultas de medios, aún puede agregar clases como<wbr class="mobileOnly">
<wbr>
doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbrfuente