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-&#65279;3/8&rdquo;

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/

— 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? ‑é 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″ou 3-3/8″. Citações não são números primos. Se você quiser em ASCII puro, use aspas duplas retas ( "). De preferência, se for apresentado como um texto legível e bom, você usaria 33/8</style>″, exibindo '3″ ″' '

— Canned Man

579

Tente usar o hífen ininterrupto ‑. 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 . 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" ( ‑) 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 -  
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 '', 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 (CSS .c1 {white-space:nowrap;}) e :

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

— Ivan Gusev

Apesar da constante pressão negativa 

— 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