Nenhuma quebra de linha após um hífen

340

Estou procurando evitar uma quebra de linha após um hífen, -caso a caso, compatível com todos os navegadores.

Exemplo:

Eu tenho este texto: 3-3/8"que em HTML é este: 3-3/8”

O problema é que, perto do final de uma linha, por causa do hífen, ele quebra e passa para a próxima linha, em vez de tratá-la como uma palavra completa ...

3-
3/8"

Eu tentei inserir o "caractere de largura zero sem interrupção", sem sorte ...

3-3/8”

Estou vendo isso no Safari e pensando que será o mesmo em todos os navegadores.

A seguir, minha doctypecodificação e de caracteres ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Existe alguma maneira de impedir que eles quebrem a linha após o hífen? Não preciso de nenhuma solução que se aplique a toda a página ... apenas algo que eu possa inserir conforme necessário, como um "caractere de largura zero sem interrupção", exceto um que funcione.

Aqui está uma demonstração. Basta tornar o quadro mais estreito até que a linha quebre no hífen.

http://jsfiddle.net/RagKH/

html css character-encoding line-breaks hyphenation Sparky
fonte
@EricLeschinski, que já foi publicado como resposta: stackoverflow.com/a/12362315/594235
Sparky
Com charset = utf-8 você pode colocar - um hífen
ininterrupto
@QuentinUK, certo ... essa já não é a resposta aceita? &#8209;é um hífen ininterrupto.
Sparky
& # 8209; é ASCII comum, portanto, utf-8 não é necessário. Com uma codificação utf-8 da página, é possível inserir os caracteres reais. - não é o mesmo caractere que - embora pareça o mesmo.
QuentinUK
O HTML correto para o que você escreveu, seria 3-3/8&Prime;ou 3-3/8&#x2033;. Citações não são números primos. Se você quiser em ASCII puro, use aspas duplas retas ( &#x22;). De preferência, se for apresentado como um texto legível e bom, você usaria 3<span style="font-variant: diagonal-fractions">3/8</style>&Prime;, exibindo '3″ ″' '
Canned Man

Respostas:

579

Tente usar o hífen ininterrupto &#8209;. Substituí o traço por esse caractere no seu jsfiddle, reduzi o quadro o mínimo possível e a linha não se divide mais.

CanSpice
fonte
10
Achei que era algo como o espaço sem quebra, então procurei por 'traço sem quebra' e acabei aqui . :-)
CanSpice
Ahhh ... eu fiz uma pesquisa de "personagem sem interrupção" e bati na parede com isso &#65279;. Apenas nunca me ocorreu que havia um hífen autônomo que não se quebra.
Sparky
6
No IE8 / 9, esse caractere é processado por mais tempo que um hífen típico. Parece ter o mesmo tamanho que um traço.
Mrtsherman
21
A razão pela qual o resultado pode diferir de um hífen normal é que muitas fontes não contêm o hífen ininterrupto. Isso força os navegadores a usar uma fonte diferente e, embora o hífen sem interrupção pareça o mesmo que o hífen normal nessa fonte, não há garantia de que ele corresponda a um hífen normal de uma fonte diferente.
Jukka K. Korpela 26/03
5
Eu acho que a resposta de Deb é a melhor.
Raio de Cheng
256

Você também pode agrupar o texto relevante com

<span style="white-space: nowrap;"></span>
Deb
fonte
17
Sim, esta é uma resposta melhor do que a aceita. Obrigado @Deb.
CMH 16/09
38
@ CMH, isso não ajuda se você deseja colocar espaços em branco (espaços em branco onde o usuário vê espaço em branco - nada), mas não deseja dividir palavras com hífens, por exemplo, a palavra "e-mail". Resposta aceita ajuda neste caso
xmojmr
12
Nesse caso, você pode apenas usar o span apenas em torno de "email".
guirto
3
@ CMH, esta é uma boa resposta que também funciona, por isso votei positivamente. No entanto, optei por não aceitar esta resposta porque pedi um personagem que não passasse automaticamente para a próxima linha. O fato de um "hífen ininterrupto" ( &#8209;) poder renderizar um pouco mais do que um hífen comum em alguns navegadores foi trivial para mim.
Sparky
11
@ Sparky Um problema com o uso de caracteres diferentes é que ele atrapalha os resultados da pesquisa. Tentar encontrar "3-3 / 8" na página não encontrará o hífen não separável.
Lister
23

O IE8 / 9 processa o hífen ininterrupto mencionado na resposta do CanSpice por mais tempo que um hífen típico. É o comprimento de um traço em vez de um hífen típico. Essa diferença de exibição foi um diferencial para mim.

Como não pude usar a resposta CSS especificada por Deb, optei por não usar tags de quebra.

<nobr>e-mail</nobr>

Além disso, encontrei um cenário específico que causou a quebra do IE8 / 9 em um hífen.

  • Uma sequência contém palavras separadas por espaços sem quebra - &nbsp;
  • A largura é limitada
  • Contém um traço

IE torna assim.

Exemplo de quebra de hífen no IE8 / 9

O código a seguir reproduz o problema mostrado acima. Eu tive que usar uma metatag para forçar a renderização no IE9, pois o IE10 corrigiu o problema. Não há problema, porque não suporta metatags.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>
Mrtsherman
fonte
6
O uso nobré a maneira mais cross-browser e funciona independentemente de fontes e CSS. O nobrelemento não está definido nas especificações HTML, mas isso deve ser considerado apenas uma formalidade. Mas se você deve escrever por especificações HTML, a resposta de Deb, usando CSS, é a melhor opção.
Jukka K. Korpela
5
Estou curioso para saber por que você não pôde usar a solução CSS.
quer
2
@RyanAhearn - Estou usando uma ferramenta de terceiros que não me dá muito controle sobre o html. Ele não suporta declarações de tags embutidas.
mrtsherman
Em vez do '<nobr>', você não poderia apenas usar um período com uma classe e controlá-lo usando o CSS?
StephenESC
11
Observe que a nobrtag não é padrão e pode quebrar a qualquer momento. A documentação do MDN não recomenda o uso desta tag: developer.mozilla.org/pt-BR/docs/Web/HTML/Element/nobr
Philipp
16

Você também pode fazer isso "da maneira do marceneiro", inserindo " U+2060Word Joiner ".

Se Accept-Charsetpermitir, o próprio caractere unicode pode ser inserido diretamente na saída HTML.

Caso contrário, isso pode ser feito usando a codificação de entidade. Por exemplo, para ingressar no texto red-brown, use:

red-&#x2060;brown

ou (equivalente decimal):

red-&#8288;brown

. Outro caractere utilizável é " U+FEFFEspaço sem quebra de largura zero " [⁠ ⁠1] :

red-&#xfeff;brown

e (equivalente decimal):

red-&#65279;brown

[1] : observe que, embora esse método ainda funcione nos principais navegadores como o Chrome, foi preterido desde o Unicode 3.2 .

Comparação de "the joiner way" com " U+2011Non-breaking Hyphen ":

  • A palavra marceneiro pode ser usada para todos os outros caracteres, não apenas para hífens.

  • Ao usar a palavra marceneiro, a maioria dos renderizadores rasteriza o texto de forma idêntica . No Chrome, FireFox, IE e Opera, a renderização de hífens normais, por exemplo:

    a B C D e F G H I J K L M N o p q R S T U V W x y Z

    é idêntico à renderização de hífens normais (com U + 2060 Word Joiner), por exemplo:

    a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠R-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

    enquanto as duas renderizações acima diferem da renderização de " Hífen sem quebra" ", por exemplo:

    a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y- z

    . (A extensão da diferença depende do navegador e da fonte. Por exemplo, ao usar uma declaração de fonte de "arial ", o Firefox e o IE11 mostram variações relativamente grandes, enquanto o Chrome e o Opera mostram variações menores.)

Comparação de "the joiner way" com <span class=c1></span>(CSS .c1 {white-space:nowrap;}) e<nobr></nobr> :

  • A palavra marceneiro pode ser usada para situações em que o uso de tags HTML é restrito, por exemplo, formas de sites e fóruns.

  • No espectro da apresentação e do conteúdo , a maioria considerará a palavra marceneiro mais próxima do conteúdo, quando comparada às tags.

• Conforme testado no Windows 8.1 Core de 64 bits usando:
    • IE 11.0.9600.18205
    • Firefox 43.0.4
    • Chrome 48.0.2564.109 (versão oficial) m (32 bits)
    • Opera 35.0.2066.92

Pacerier
fonte
Parece que "Espaço sem quebra de largura zero do U + FEFF" não funciona corretamente no IE11.
precisa
Parece que "U + 2060" não funciona se "-" for seguido por algum caractere unicode: assimbingo-&#8288;bongo
Ivan Gusev
Apesar da constante pressão negativa &#xfeff;
JamesWilson
6

Tarde da festa, mas acho que isso é realmente o mais elegante. Use o caractere Unicode do WORD JOINER & # 8288 ; nos dois lados do hífen, traço ou qualquer caractere.

Então, assim:

&#8288;—&#8288;

Isso unirá o símbolo nas duas extremidades aos vizinhos (sem adicionar espaço) e evitará a quebra de linha.

Eckstein
fonte
Eu era capaz de chegar a este trabalho usando ALT + 0173 (hífen) por algum motivo no Windows 10.
pspahn