Sin salto de línea después de un guión

340

Estoy buscando evitar un salto de línea después de un guión -caso por caso que sea compatible con todos los navegadores.

Ejemplo:

Tengo este texto: 3-3/8"que en HTML es este: 3-3/8”

El problema es que cerca del final de una línea, debido al guión, se rompe y pasa a la siguiente línea en lugar de tratarla como una palabra completa ...

3-
3/8"

He intentado insertar el "carácter de cero ancho sin interrupción", sin suerte ...

3-3/8”

Estoy viendo esto en Safari y creo que será igual en todos los navegadores.

La siguiente es mi doctypey codificación 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" />

¿Hay alguna manera de evitar que estos salten después del guión? No necesito ninguna solución que se aplique a toda la página ... solo algo que pueda insertar según sea necesario, como un "carácter de cero ancho sin interrupción", excepto uno que funcione.

Aquí hay una demostración. Simplemente haga el marco más estrecho hasta que la línea se rompa en el guión.

http://jsfiddle.net/RagKH/

html css character-encoding line-breaks hyphenation Chispeante
fuente
@EricLeschinski, eso ya se publicó como respuesta: stackoverflow.com/a/12362315/594235
Sparky el
Con charset = utf-8 puedes poner - un guión que no se rompe
QuentinUK
@QuentinUK, cierto ... ¿no es esa la respuesta aceptada? &#8209;es un guión que no se rompe.
Sparky
& # 8209; es ASCII ordinario, por lo que utf-8 no es necesario. Con una codificación utf-8 de la página, es posible poner los caracteres reales. - no es el mismo personaje que - aunque se ve igual.
QuentinUK
El HTML correcto para lo que escribiste, sería 3-3/8&Prime;o 3-3/8&#x2033;. Las citas no son primos. Si lo quieres en ASCII puro, solo usa comillas dobles rectas ( &#x22;). Preferiblemente, si se va a presentar como un texto bueno y legible, en su lugar usaría 3<span style="font-variant: diagonal-fractions">3/8</style>&Prime;, mostrando '3⅜ ″'
Canned Man

Respuestas:

579

Intenta usar el guión que no se rompe &#8209;. He reemplazado el guión con ese personaje en su jsfiddle, reduje el marco lo más pequeño posible y la línea ya no se divide allí.

CanSpice
fuente
10
Pensé que era algo así como el espacio que no se rompe, así que solo busqué 'tablero sin interrupciones', y terminé aquí . :-)
CanSpice
Ahhh ... Hice una búsqueda de "personaje sin descanso" y golpeé la pared con eso &#65279;. Simplemente nunca se me ocurrió que había un carácter de guión independiente que no se rompería.
Sparky
66
En IE8 / 9, este carácter se muestra más largo que un guión típico. Parece ser del mismo tamaño que un en-dash.
mrtsherman
21
La razón por la cual el resultado puede diferir de un guión normal es que muchas fuentes no contienen el guión continuo. Esto obliga a los navegadores a usar una fuente diferente, y aunque el guión que no se rompe se ve igual que el guión normal en esa fuente, no hay garantía de que coincida con un guión normal de una fuente diferente.
Jukka K. Korpela
55
Creo que la respuesta de Deb es la mejor.
Ray Cheng
256

También puede ajustar el texto relevante con

<span style="white-space: nowrap;"></span>
Debutante
fuente
17
Sí, esta es una mejor respuesta que la aceptada en mi humilde opinión. Gracias @Deb.
CMH
38
@CMH esto no ayuda si desea ajustar espacios en blanco (lugares en blanco donde el usuario ve espacios en blanco, nada) pero no desea dividir las palabras con guiones, por ejemplo, la palabra "correo electrónico". La respuesta aceptada ayuda en este caso
xmojmr
12
En ese caso, puede usar span solo alrededor de "correo electrónico".
guirto
3
@CMH, esta es una buena respuesta que también funciona, así que lo voté. Sin embargo, elegí no aceptar esta respuesta porque pedí un personaje que no saltara automáticamente a la siguiente línea. El hecho de que un "guión que no se rompe" ( &#8209;) podría procesar un poco más que un guión normal en ciertos navegadores fue trivial para mí.
Sparky
11
@Sparky Un problema con el uso de diferentes caracteres es que arruina los resultados de búsqueda. Intentar encontrar "3-3 / 8" en la página no encontrará el guión que no se rompe.
Sr. Lister el
23

IE8 / 9 procesa el guión sin interrupción mencionado en la respuesta de CanSpice más tiempo que un guión típico. Es la longitud de un guión en lugar de un guión típico. Esta diferencia visual fue un factor decisivo para mí.

Como no pude usar la respuesta CSS especificada por Deb, opté por no usar etiquetas de interrupción.

<nobr>e-mail</nobr>

Además, encontré un escenario específico que causó que IE8 / 9 se rompiera en un guión.

  • Una cadena contiene palabras separadas por espacios que no se rompen. &nbsp;
  • Ancho es limitado
  • Contiene un guión

IE lo hace así.

Ejemplo de separación de guiones en IE8 / 9

El siguiente código reproduce el problema que se muestra arriba. Tuve que usar una metaetiqueta para forzar el renderizado a IE9 ya que IE10 ha solucionado el problema. Sin violín porque no admite metaetiquetas.

<!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
fuente
66
Usar nobres la forma más cruzada del navegador y funciona independientemente de las fuentes y CSS. El nobrelemento no está definido en las especificaciones HTML, pero esto debe considerarse solo como una formalidad. Pero si debe escribir por especificaciones HTML, entonces la respuesta de Deb, usando CSS, es la mejor opción.
Jukka K. Korpela
55
Tengo curiosidad por qué no pudiste usar la solución CSS.
Ryan Ahearn
2
@RyanAhearn: estoy usando una herramienta de terceros que no me da mucho control sobre html. No admite declaraciones de etiquetas en línea.
mrtsherman
En lugar de '<nobr>', ¿no podría haber utilizado un lapso con una clase y controlarlo utilizando el CSS?
StephenESC
1
Tenga en cuenta que la nobretiqueta no es estándar y puede romperse en cualquier momento. La documentación de MDN no recomienda usar esta etiqueta: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
Philipp
16

También puede hacerlo "al modo de unión" insertando " U+2060Word Joiner ".

Si lo Accept-Charsetpermite, el propio carácter Unicode se puede insertar directamente en la salida HTML.

De lo contrario, se puede hacer usando codificación de entidad. Por ejemplo, para unir el texto red-brown, use:

red-&#x2060;brown

o (equivalente decimal):

red-&#8288;brown

. Otro carácter utilizable es " U+FEFFEspacio sin interrupción de ancho cero " [⁠ ⁠1] :

red-&#xfeff;brown

y (equivalente decimal):

red-&#65279;brown

[1] : Tenga en cuenta que si bien este método todavía funciona en los principales navegadores como Chrome, ha quedado en desuso desde Unicode 3.2 .

Comparación de "la forma de unión" con " U+2011guión sin ruptura ":

  • La palabra carpintero se puede usar para todos los demás caracteres, no solo guiones.

  • Cuando se usa la combinación de palabras, la mayoría de los renderizadores rasterizarán el texto de manera idéntica . En Chrome, Firefox, IE y Opera, la representación de guiones normales, por ejemplo:

    ABCDEFGHIJKLMNOPQRSTU VWXYZ

    es idéntico a la representación de guiones normales (con U + 2060 Word Joiner), por ejemplo:

    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

    mientras que las dos representaciones anteriores difieren de la representación de " Guión sin ruptura ", por ejemplo:

    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

    . (El alcance de la diferencia depende del navegador y de la fuente. Por ejemplo, cuando se utiliza una declaración de fuente de " arial", Firefox e IE11 muestran variaciones relativamente grandes, mientras que Chrome y Opera muestran variaciones más pequeñas).

Comparación de "the joiner way" con <span class=c1></span>(CSS .c1 {white-space:nowrap;}) y <nobr></nobr>:

  • La palabra ensambladora puede usarse para situaciones en las que el uso de etiquetas HTML está restringido, por ejemplo, formas de sitios web y foros.

  • En el espectro de presentación y contenido , la mayoría considerará que la palabra ensambladora está más cerca del contenido, en comparación con las etiquetas.

• Según lo probado en Windows 8.1 Core de 64 bits con:
    • IE 11.0.9600.18205
    • Firefox 43.0.4
    • Chrome 48.0.2564.109 (versión oficial) m (32 bits)
    • Opera 35.0.2066.92

Pacerier
fuente
Parece que "U + FEFF Zero Width No-break Space" no funciona correctamente en IE11.
Ivan Gusev
Parece que "U + 2060" no funciona si "-" es seguido por un char unicode: asíbingo-&#8288;bongo
Ivan Gusev
A pesar de la constante prensa negativa&#xfeff;
JamesWilson
6

Tarde a la fiesta, pero creo que este es realmente el más elegante. Utilice el carácter Unicode WORD JOINER & # 8288 ; a cada lado de tu guión, o guión, o cualquier personaje.

Entonces, así:

&#8288;—&#8288;

Esto unirá el símbolo en ambos extremos a sus vecinos (sin agregar un espacio) y evitará el salto de línea.

Eckstein
fuente
Pude hacer que esto funcionara usando ALT + 0173 (guión suave) por alguna razón en Windows 10.
pspahn