Quais são as melhores práticas para lidar com quebras de linha desejadas no design responsivo da web?

Projecto uma grande quantidade de itens simples de uma página para vendas ou email. Costumo encontrar problemas com títulos e minhas quebras de linha desejadas em diferentes larguras de mídia.

Por exemplo, eu poderia ter um título como:

Nosso novo thingamabob é a melhor coisa desde pão fatiado!

Com absolutamente nenhuma atenção às quebras de linha, a linha quebra assim:

Nosso novo thingamabob é a melhor coisa desde
pão fatiado!

No tamanho total da web, gostaria de quebrar a linha após "o". Criando duas linhas.

Nosso novo thingamabob é a
melhor coisa desde pão fatiado!

Para uma tela com largura média, eu quebraria duas vezes:

Nosso novo thingamabob
é a melhor coisa
desde pão fatiado!

Para telas ainda mais estreitas, eu iria depois de "new", depois de "thingamabob" e depois de "thing". Criando quatro linhas.

Nosso novo
thingamabob
é a melhor coisa
desde pão fatiado!

Eu realmente não quero usar tags de quebra ( <br>) porque isso define as quebras em todos os tamanhos. Até agora eu usei consultas de mídia e porcentagens de largura para os vários h1- h5etiquetas para que a largura das forças de tag de uma pausa. Mas isso parece "hacky" para mim ( às vezes também é muito temperamental, com base no texto atual).

Qual é a melhor maneira de controlar quebras de linha sem codificá-las no html?

Só o aconselho com base no fato de que é usado para pequenos trechos de texto e não para parágrafos.

A formatação das manchetes pode e deve ser controlada o máximo possível, dentro de limites razoáveis . JavaScript ou elementos extras desnecessários não são "limites razoáveis" .

Espaços sem quebra, por outro lado ... podem ser úteis quando usados ​​com moderação.
Colocá-los entre os pares de palavras e trigêmeos que você gostaria de manter juntos pode produzir os resultados desejados.

No entanto, você não pode usar muitos consecutivamente, dependendo do tamanho das palavras que estiver usando, vincular muitos forçará o texto a sair da janela de exibição ou de seu contêiner.

Algumas experiências rápidas em seu próprio conjunto de palavras devem revelar as melhores para vincular.

Para o exemplo nesta pergunta, o HTML pode se parecer com:

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

Na verdade, não há CSS necessário aqui. O CSS neste exemplo que eu produzi é apenas por diversão.

Em poucas palavras, a chave para esse método é limitar o número de lugares em que o texto pode ser quebrado.

Depois de reler a pergunta, percebo que não satisfazi completamente os requisitos. Para esse caso específico, e assumindo que existem outras páginas que requerem a mesma atenção, eu definiria uma única <br>para um ponto de interrupção de largura total. Eu reutilizaria a mesma classe em cada uma das páginas no local mais ideal do cabeçalho.

Essa <br>classe entraria em colapso com algo menor que a largura total, agindo como se nem estivesse lá, com o uso de consultas de mídia. Em tamanhos de viewport menores que a largura total, contamos  apenas com os.

Outro exemplo com um single<br> mais próximo da marca.

O HTML:

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

O 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 */
    }
}

A melhor prática é reconhecer que você não tem controle real sobre quebras de linha na Web e é melhor projetar com isso em mente.

Qualquer solução em contrário, invariavelmente, terá que ser hacky. Como será um hack, o HTML não adere a quebras de linha definidas pelo usuário fora da codificação. Você poderia fazer isso com JS facilmente. Configure seus pontos de interrupção com vãos vazios com classes exclusivas e, com base no tamanho da janela de visualização, você poderá injetar tags BR em cada SPAN desejado.

Existem alguns estilos CSS que funcionarão em navegadores mais recentes para controlar a maneira como o navegador lida com quebra de linha, mas ainda não fornecerá o controle exato que você está procurando nessa situação.

Por outro lado, se seu objetivo não é tanto controlar quebras de linha específicas, mas para garantir que seu bloco de texto seja 'empilhado' em linhas relativamente uniformes, eu definiria a largura do DIV de maneira diferente para cada viewport. Não será perfeito, mas provavelmente bem próximo e pode ser o melhor compromisso.

Existe um plugin jquery para isso, Balance Text .

É um plugin criado pela Adobe,text-wrap: balance; criado juntamente com a proposta da Adobe de obter uma opção de CSS que faria isso como o recurso Balance Ragged Lines do Adobe InDesign (parece ótimo, mas mesmo que seja aceito, levará anos até que os navegadores o suportem).

O plugin, no entanto, funciona agora. Ele equilibra qualquer elemento que tenha a classe balance-textou use o jQuery como$('.some-elements').balanceText();

• Aqui está uma demonstração oficial da Adobe , usando texto justificado .

• Aqui está uma demonstração que fiz usando <h1>s - alinhado à esquerda - clique em editar para ver o código. Isso mostra algumas das limitações no momento da escrita:

Limitações

Atualmente, esse código funciona apenas em texto em tags no nível do bloco sem elementos embutidos.

Na demonstração 4 você verá como tudo dentro do seu bloco de texto equilibrado como um <a>link, <span>S ou ênfase, como <em>, <strong>, <b>, <i>etc é removido.

Além disso, comparando demos 1, 2 e 5, você verá que você parece necessidade de usar tanto a classe CSS ea chamada jQuery.

Parece moderadamente confiável, mas às vezes com falhas - na hora de escrever, às vezes escapa quando está em uma coluna lateral, deixando órfãos solitários (mas parece funcionar 95% + do tempo e ainda não o vi escapar, exceto quando em uma coluna lateral), e por razões inexplicáveis, minhas demos não funcionam no Firefox, mas as demos da Adobe funcionam (perfeitas no IE9 +, não podem ser testadas no IE8 no momento). Se você usá-lo, considere algum tempo de teste.

Eu tenho que lidar com isso de forma um tanto regular, com sugestões de designers que desejam que as coisas desapareçam de uma certa maneira. Eu descobri que a maneira mais direta de fazer isso é colocar um espaço com uma classe dentro do texto e, em seguida, ter esse espaço display: block;para as consultas de mídia.

Portanto, seria algo como isto:

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

Então eu teria CSS com algo parecido com isto:

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

Você ainda precisa passar por isso para garantir que as coisas quebrem da maneira que você deseja para todas as larguras.

Se for um problema frequente, você poderá criar seu próprio conjunto de classes de quebra de linha no Twitter Bootstrap ou em qualquer sistema de grade que estiver usando, modelando os nomes das classes após qualquer convenção de nomenclatura que estiver usando.

Você pode usar o JavaScript para detectar a largura da tela e escrever a versão correta (com <br> 's como você a encontra em sua postagem) em uma div vazia via innerHTML.

Infelizmente, as "quebras da web desejadas" e as "melhores práticas da web" não caminham juntas. Deixe de lado seu desejo perfeccionista de colocar todas as palavras no lugar certo - há muitas possibilidades de tela e muitos leitores que não têm a mentalidade de designer que você precisa para se preocupar com quebras de linha em seus títulos. Consulte o Responsive Web Design para entender melhor esses problemas.

Meu método atual ...

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

E o 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; }
}

Às vezes, as larguras precisam de algum ajuste com base no texto real sendo usado, mas esse é o esquema geral que eu uso. Essencialmente, reduzindo a largura da h1tag para que a linha quebre onde eu quero que ela quebre.

Isso funciona, apenas exige testes exaustivos para garantir que ocorram interrupções quando desejado. Porém, testes completos são necessários em qualquer caso. Portanto, não é necessariamente mais trabalho nesse sentido.

Você pode adicionar white-space: nowrape colocar <wbr>nos locais em que deseja permitir quebras de linha. Se isso não for suficiente e você desejar um bom controle com consultas de mídia, ainda poderá adicionar classes como<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr