tabela - quebra de linha html5




Sem quebra de linha após um hífen (4)

Estou tentando 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 é isto: 3-3/8”

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

3-
3/8"

Eu tentei inserir a "largura zero sem caractere de quebra",  sem sorte ...

3-3/8”

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

O seguinte é meu doctype e codificação 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 que eu possa impedir estes de quebra de linha após o hífen? Eu 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 "zero width no break", exceto um que funcione.

Aqui está uma demonstração. Simplesmente torne o quadro mais estreito até que a linha se rompa no hífen.

http://jsfiddle.net/RagKH/


O IE8 / 9 renderiza o hífen não quebra mencionado na resposta do CanSpice mais longo do 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 fator decisivo para mim.

Como não consegui 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 string contém palavras separadas por espaços não quebráveis ​​- &nbsp;
  • A largura é limitada
  • Contém um traço

IE processa isso assim.

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

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

Tarde para a festa, mas acho que isso é realmente o mais elegante. Use o caractere Unicode do WORD JOINER & # 8288 ; de cada lado do seu hífen, ou em traço, ou qualquer caractere.

Então, assim:

&#8288;—&#8288;

Isso unirá o símbolo em ambas as extremidades a seus vizinhos (sem adicionar um espaço) e impedirá a quebra de linha.


Você também pode envolver o texto relevante com

<span style="white-space: nowrap;"></span>

Você também pode fazer "o caminho do marceneiro" inserindo " U+2060 Word Joiner ".

Se Accept-Charset permitir, o próprio caractere unicode poderá ser inserido diretamente na saída HTML.

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

red-&#x2060;brown

ou (equivalente decimal):

red-&#8288;brown

. Outro caractere utilizável é " U+FEFF Zero Largura No-break Space " [⁠ ⁠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, ele foi substituído desde o Unicode 3.2 .

Comparação de "o caminho do marceneiro" com " U+2011 Non-breaking Hyphen ":

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

  • Ao usar a palavra marceneiro, a maioria dos renderizadores irá rasterizar 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 ao processamento de hífens normais (com o 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 os dois acima se distinguem da renderização de " Non-breaking Hyphen ", por exemplo:

    a-b-c-d-e-f-g-h-j-k ‑ l ‑ m ‑ n ‑ 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 " 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> ( .c1 {white-space:nowrap;} ) e <nobr></nobr> :

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

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

• Como testado no Windows 8.1 Core de 64 bits usando:
• IE 11.0.9600.18205
• Firefox 43.0.4
• Chrome 48.0.2564.109 (Build Oficial) m (32 bits)
• Ópera 35.0.2066.92





hyphenation