¿Cuáles son las mejores prácticas para lidiar con los saltos de línea deseados en el diseño web receptivo?

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- h5etiquetas 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?

Solo estoy aconsejando esto sobre la base de que se usa para fragmentos cortos de texto y no para párrafos.

El formato de los titulares puede y debe controlarse tanto como sea posible dentro de límites razonables . JavaScript o elementos innecesarios adicionales no son "límites razonables" .

Los espacios que no se rompen, por otro lado ... pueden ser útiles cuando se usan con moderación.
Colocándolos entre los pares de palabras y los trillizos que le gustaría mantener juntos puede producir los resultados que desea.

Sin embargo, no puede usar muchos consecutivamente, dependiendo de la longitud de las palabras que esté usando, vincular demasiados obligará al texto a desbordarse de la ventana gráfica o su contenedor.

Un poco de experimentación rápida en su propio conjunto particular de palabras debería revelar las mejores palabras para vincular.

Para el ejemplo en esta pregunta, el HTML podría verse así:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

En realidad no hay CSS necesario aquí. El CSS en este ejemplo que he producido es solo por diversión.

En pocas palabras, la clave de este método es limitar el número de lugares donde se permite que el texto se rompa.

Después de releer la pregunta, me doy cuenta de que no cumplí con los requisitos. Para este caso específico, y suponiendo que hay otras páginas que requieren la misma atención, definiría una sola <br>para un punto de corte de ancho completo. Luego reutilizaría la misma clase en cada una de las páginas en el lugar más ideal del encabezado.

Esta <br>clase colapsaría en algo más pequeño que el ancho completo actuando como si ni siquiera estuviera allí, con el uso de consultas de medios. En los tamaños de ventana inferior al ancho total, confiamos  solo en el.

Otro ejemplo con un single<br> que está más cerca de la marca.

El HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

El CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

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.

Hay un complemento jquery para eso, Balance Text .

Es un complemento creado por Adobetext-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:

Limitaciones

Este código actualmente solo funciona en texto en etiquetas de nivel de bloque sin elementos en línea.

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.

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í:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Entonces tendría CSS con algo como esto:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

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.

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.

Mi método actual ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

Y el CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

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 h1etiqueta 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.

Puede agregar white-space: nowrapy 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/wbr