Para mantener un signo de puntuación separado por un espacio junto a la palabra anterior en una página web, sustituye el espacio normal por un espacio de no separación o envuelve ambos elementos en un pequeño span CSS sin ajuste de línea. En tu Mac, usa una prueba HTML local para comprobar el resultado con distintos anchos.

Esta guía está dirigida a quienes editan el texto o el HTML de una página en un Mac; por ejemplo, una etiqueta breve como Beta : en una tarjeta estrecha. El objetivo es conservar el espacio visible e impedir que los dos puntos pasen solos a la línea siguiente. Los ejemplos conservan deliberadamente ese espacio.

¿Qué solución conviene elegir?

Empieza por decidir si la regla de espaciado debe formar parte del texto o de la presentación de la página. Unicode define U+00A0 NO-BREAK SPACE como la versión de no separación de un espacio normal, y U+202F NARROW NO-BREAK SPACE como su variante más estrecha. Estas opciones ofrecen dos anchos de espacio visibles distintos. Estándar Unicode, capítulo 6

Situación de edición Opción inicial recomendada Qué comprobar
Puedes cambiar el texto y quieres un espacio de ancho normal Sustituye el espacio normal por U+00A0 Que el texto guardado siga conteniendo el carácter de no separación
Quieres deliberadamente un espacio más estrecho Usa U+202F Que el resultado se vea bien con la fuente real de la página
Quieres conservar un espacio normal en el texto Aplica white-space: nowrap a un span que contenga ambos elementos Que el span incluya la palabra, el espacio y el signo de puntuación
Solo puedes ver la página Haz la corrección en su código editable o pídesela a quien la mantiene Que una prueba local no cambia la página original

En el código HTML, escribe Beta :. La tabla de referencias de caracteres con nombre del estándar WHATWG asigna   a U+00A0. Sustituye el espacio existente; no dejes un espacio normal antes de la referencia. Estándar HTML: referencias de caracteres con nombre

Para aplicar una regla de presentación, coloca Beta : dentro de un span en línea y aplica white-space: nowrap a ese span. Deja que el párrafo que lo rodea se ajuste normalmente. MDN documenta white-space como una propiedad que controla tanto el tratamiento de espacios en blanco como el ajuste de línea. MDN: white-space

La decisión práctica depende de cuánto texto debe permanecer unido. En este ejemplo, protege solo Beta :. Proteger Tile Alpha Beta : Next tile limitaría innecesariamente toda la etiqueta. Empieza por la unidad más pequeña que exprese la relación deseada.

Cómo hacer una prueba local con TextEdit

Crea un archivo de prueba aparte antes de modificar una página existente. Apple explica cómo usar TextEdit en modo de texto sin formato para crear archivos HTML, guardarlos con la extensión .html y elegir Usar .html cuando se te solicite. Trabajar con documentos HTML en TextEdit en Mac

  1. Abre TextEdit y elige Archivo > Nuevo.
  2. Elige Formato > Convertir a texto sin formato.
  3. Pega el ejemplo completo que aparece abajo.
  4. Elige Archivo > Guardar y nombra el archivo punctuation-test.html.
  5. Si se te solicita, elige Usar .html.
  6. En Safari, usa Archivo > Abrir archivo para abrir el archivo guardado.

Este es un documento HTML independiente y completo. No requiere bibliotecas, instalación ni conexión a Internet. Las tres tarjetas usan el mismo texto ficticio, pero aplican un tratamiento distinto al espacio anterior a los dos puntos.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

La conversión de la referencia de caracteres del ejemplo se comprobó con un analizador: &nbsp; se convierte en U+00A0. Durante la preparación no se ejecutó la representación en el navegador. Usa la siguiente comparación para comprobar la disposición en el navegador de tu Mac.

Compara el punto de ajuste, no una sola captura de pantalla

El ancho ilustrativo 14ch es un punto de partida, no un punto de quiebre garantizado. Cámbialo a 10ch, guarda, vuelve a cargar y prueba después 18ch. Busca un ancho en el que la tarjeta con espacio normal separe los dos puntos de Beta. En las dos versiones protegidas, el resultado esperado es que Beta y los dos puntos permanezcan juntos, mientras las demás palabras pueden pasar a otra línea.

Si al principio las tres tarjetas se ven iguales, eso no demuestra que los tratamientos del espacio sean equivalentes. Puede que simplemente haya espacio suficiente para ambos elementos. Cambia el ancho hasta que el punto de ajuste relevante llegue al final de línea; luego aumenta el tamaño del texto y repite la prueba.

Al volver a abrir el archivo en TextEdit, usa Archivo > Abrir, selecciona el archivo, elige Mostrar opciones y selecciona Ignorar comandos de texto enriquecido si es necesario. Apple también documenta el ajuste Mostrar archivos HTML como código HTML en lugar de texto con formato. Estas opciones permiten editar directamente el código fuente. Instrucciones de Apple para HTML en TextEdit

¿Por qué podría fallar un espacio de no separación?

Un carácter de no separación funciona dentro de las reglas de flujo de texto del navegador. Antes de añadir más caracteres invisibles, comprueba si el problema se debe al contenido, a una regla CSS que lo sobrescribe o a un límite de la disposición.

La página muestra la referencia literalmente

Si la página muestra los caracteres &nbsp;, la entrada se trató como texto en lugar de analizarse como una referencia de carácter HTML. En un campo de código HTML, usa Beta&nbsp;:. En un campo de texto normal, inserta el propio carácter de no separación.

La misma distinción se aplica a JavaScript. Asignar una cadena mediante textContent crea texto; no analiza referencias HTML. Una cadena de JavaScript puede contener el carácter como "Beta\u00A0:". Evita también asignar textContent a un párrafo con formato completo solo para corregir un espacio: al hacerlo, sustituyes sus elementos existentes. MDN: Node.textContent

Una regla CSS permite un ajuste de línea inusualmente agresivo

Comprueba si se usa line-break: anywhere. MDN documenta que este valor permite saltos alrededor de unidades tipográficas, sin tener en cuenta las prohibiciones asociadas con las clases de unión y de unión de palabras. Por tanto, no se puede tratar un carácter de no separación añadido como una excepción incondicional a ese ajuste. MDN: line-break

Revisa también overflow-wrap. Su valor anywhere permite dividir una secuencia que de otro modo no podría separarse cuando sea necesario para evitar el desbordamiento. Ese comportamiento de emergencia es distinto de un salto normal en un espacio. MDN: overflow-wrap

Usa un span local sin ajuste de línea cuando la presentación requiera que el par breve permanezca intacto. Comprueba la regla aplicada realmente a ese span, sobre todo si la hoja de estilos de la página contiene selectores más específicos. Mantén la corrección acotada para que el texto largo no relacionado conserve su ajuste actual.

El signo de puntuación ocupa una caja de disposición independiente

Comprueba si los dos puntos son texto en línea normal o si están dentro de un inline-block u otro elemento en línea atómico. El W3C especifica oportunidades especiales de salto alrededor de elementos en línea atómicos, incluida una excepción relacionada con espacios de no separación contiguos. Un espacio insertado junto a una caja de ese tipo no equivale a un espacio dentro de una secuencia de texto continua. Módulo de texto CSS, nivel 3: detalles sobre los saltos de línea

Para esta etiqueta sencilla, mantén la palabra, el espacio y el signo de puntuación dentro de un único span en línea normal. Elimina cualquier <br> explícito entre ellos si quieres que el ajuste sea automático; nowrap suprime el ajuste suave, pero no elimina los saltos forzados. Módulo de texto CSS, nivel 3: espacios en blanco y ajuste de línea

¿Cómo conservar la composición tipográfica del navegador y gestionar diseños estrechos?

Mantén cada palabra intacta en lugar de ajustar sus letras por separado. El W3C define cuándo debe continuar la composición tipográfica a través de límites entre elementos en línea y cuándo debe interrumpirse por cambios como relleno, bordes o alineación interpuestos. Un span en línea simple evita introducir límites de formato innecesarios. Módulo de texto CSS, nivel 3: composición tipográfica a través de límites entre elementos

Aun así, existe una limitación física: el par protegido necesita suficiente espacio horizontal. Si el contenedor se vuelve más estrecho que Beta :, mantener el par unido puede causar desbordamiento. Prueba deliberadamente esa situación. Luego elige una solución para el diseño, como ensanchar la tarjeta o acortar la etiqueta, en lugar de ocultar el texto afectado. El comportamiento sin ajuste de línea está documentado en la definición de white-space del W3C.

¿Necesitas una biblioteca para los saltos de línea?

Para una página web normal, esta tarea no requiere ninguna. La biblioteca linebreak calcula las oportunidades de salto de acuerdo con Unicode; su documentación deja explícitamente la selección del salto concreto a cargo del software que conoce el ancho disponible y el tamaño del texto mostrado. Su archivo README indica actualmente que es compatible con la versión 13 de Unicode. Documentación de foliojs/linebreak

Esa distinción importa si otra herramienta ya usa la biblioteca. Una lista de posibles saltos no determina dónde ajustará el navegador el texto compuesto. Para esta tarea de edición de páginas, deja la composición tipográfica y la disposición final de las líneas en manos del navegador, y expresa la restricción deseada mediante el carácter o el CSS local.

Antes de aplicar la corrección, confirma tres cosas: el espacio sigue visible, la palabra y el signo de puntuación permanecen juntos cerca del final de una línea y el texto circundante puede seguir ajustándose. Usa un espacio de no separación cuando la relación forme parte del texto, o un span sin ajuste de línea con alcance limitado cuando forme parte de la presentación. Vuelve a comprobar la página real en su ancho útil más estrecho.

Fuentes