html - quitar - Sin salto de línea después de un guión
salto de linea html/n (5)
Busco 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 se ajusta a la siguiente línea en lugar de tratarlo como una palabra completa ...
3-
3/8"
He intentado insertar el "carácter de ancho cero sin interrupción",  sin suerte ...
3-3/8”
Estoy viendo esto en Safari y pensando que será lo mismo en todos los navegadores.
Lo siguiente es mi doctype y 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 saltos de línea 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 ancho cero sin interrupción", excepto uno que funcione.
Aquí hay una demo. Simplemente haga el cuadro más estrecho hasta que la línea se rompa en el guión.
IE8 / 9 hace que el guión sin interrupción mencionado en la respuesta de CanSpice sea más largo que un guión típico. Es la longitud de un en-dash en lugar de un guión típico. Esta diferencia de pantalla fue un factor decisivo para mí.
Como no pude usar la respuesta CSS especificada por Deb, opté por no usar etiquetas de ruptura.
<nobr>e-mail</nobr>
Además, encontré un escenario específico que provocó que IE8 / 9 se rompiera en un guión.
- Una cadena contiene palabras separadas por espacios que no se rompen -
- El ancho es limitado
- Contiene un guión
IE lo hace así.
El siguiente código reproduce el problema representado arriba. Tuve que usar una etiqueta meta para forzar la representación a IE9, ya que IE10 ha solucionado el problema. No violín porque no admite etiquetas meta.
<!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 there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>
Intente usar el guión que no rompe ‑ . He reemplazado el guión con ese carácter en tu jsfiddle, he reducido el marco lo más pequeño posible y la línea ya no se divide allí.
También puede envolver el texto relevante con
<span style="white-space: nowrap;"></span>
También puedes hacerlo "a la manera de unirte" insertando " U+2060 Word Joiner ".
Si Accept-Charset permite, el propio carácter Unicode se puede insertar directamente en la salida HTML.
De lo contrario, se puede hacer utilizando la codificación de la entidad. Por ejemplo, para unir el texto red-brown , use:
red-⁠brown
o (equivalente decimal):
red-⁠brown
. Otro carácter utilizable es " U+FEFF Ancho cero Sin espacio de descanso " [ 1] :
red-brown
y (equivalente decimal):
red-brown
[1] : Tenga en cuenta que si bien este método aún funciona en los principales navegadores como Chrome, ha quedado obsoleto desde Unicode 3.2 .
Comparación de "la forma de unión" con " U+2011 guión sin interrupción ":
La palabra combinación 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 interrupción ", por ejemplo:
a ‑ b ‑ c ‑ d ‑ e ‑ f ‑ g ‑ i ‑ j ‑ k ‑ l ‑ m ‑ n ‑ o ‑ p ‑ r ‑ r ‑ t ‑ t ‑ u ‑ v ‑ v ‑ v ‑ v ‑ v 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 "carpintero" se puede usar para situaciones donde el uso de etiquetas HTML está restringido, por ejemplo, formas de sitios web y foros.
En el espectro de la presentación y el contenido , la mayoría considerará que la palabra ensamblador está más cerca del contenido, en comparación con las etiquetas.
• Según lo probado en Windows 8.1 Core 64-bit usando:
• IE 11.0.9600.18205
• Firefox 43.0.4
• Chrome 48.0.2564.109 (compilación oficial) m (32 bits)
• Ópera 35.0.2066.92
Tarde a la fiesta, pero creo que esta es en realidad la más elegante. Utilice el carácter Unicode de WORD JOINER & # 8288 ; a cada lado de tu guión, o guión, o cualquier carácter.
Así, como así:
⁠—⁠
Esto unirá el símbolo en ambos extremos a sus vecinos (sin agregar un espacio) y evitará el corte de línea.