Cómo evitar saltos de línea con CSS

Introducción

Generalmente, a los desarrolladores les gusta ajustar el texto de las páginas web. Esto restringe el texto de una forma u otra y evita problemas de diseño. Ajustar el texto también puede evitar que ocurra un desplazamiento horizontal. Pero hay momentos en los que deseamos que los bloques de texto permanezcan en la misma línea, independientemente de su longitud. Los saltos de línea y el ajuste de texto se puede evitar para elementos específicos usando la propiedad white-space de CSS.

En este tutorial, agregará estilo al mismo bloque de texto de cuatro formas diferentes, primero con los saltos de línea y luego tres veces sin saltos de línea:

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Esto le dará varias opciones para ajustar o no ajustar su texto.

Requisitos previos

Para completar este tutorial, necesitará lo siguiente:

• Un editor de código de su elección, como nano o Visual Studio Code
• Un navegador web
• Comodidad con los principios básicos de HTML. Puede ver nuestra serie de tutoriales: Cómo crear un sitio web con HTML para obtener una introducción.

Paso 1: Prevenir y forzar saltos de línea en CSS

En este paso, creará una hoja de estilo con tres clases diferentes. Cada una de ellas manejará los saltos de línea de forma diferente: la primera saltará el texto de la forma predeterminada, mientras que la segunda y la tercera forzarán el texto a no crear una nueva línea y saltarla.

Primero, cree y abra un archivo llamado main.css usando nano o el editor de su preferencia:

nano main.css

Añada el siguiente contenido, que introducirá tres clases de CSS que utilizan diversas propiedades, incluyendo white-space:

.sammy-wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
}
.sammy-nowrap-1 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
}
.sammy-nowrap-2 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Su primera clase es .sammy-wrap. Define seis propiedades comunes de CSS, incluyendo border-radius, background-color, border max-width, padding y margin-bottom. Esta clase creará un cuadro visual, pero no define ninguna propiedad de ajuste especial. Esto significa que saltará líneas de forma predeterminada.

La segunda clase es .sammy-nowrap-1. Define el mismo cuadro que .sammy-wrap, pero ahora añade otra propiedad: white-space. La propiedad white-space tiene numerosas opciones, las cuales definen cómo tratar el espacio en blanco dentro de un elemento determinado. Aquí, configuró white-space para nowrap, lo que evitará todos los saltos de línea.

Su tercera clase es .sammy-nowrap-2. Añade white-space y dos propiedades adicionales: overflow y text-overflow. La propiedad overflow maneja scrollable overflow, que ocurre cuando el contenido dentro de un elemento se extiende fuera de los bordes de ese elemento. La propiedad overflow permite desplazar, hacer visible u ocular el contenido. Configurar overflow a hidden y, luego, usar la propiedad text-overflow añade aún más personalización. text-overflow puede ayudarlo a indicarle a un usuario que el texto adicional sigue oculto. Al configurarlo a ellipsis, su línea no se saltará ni extenderá más allá del cuadro. CSS ocultará el desbordamiento y señalará el contenido oculto con unos ....

Guarde y cierre su archivo.

Ahora que tiene una hoja de estilo, está listo para realizar un archivo HTML corto con un texto de muestra. Luego, cargará la página web en un navegador e inspeccionará cómo CSS puede evitar saltos de línea.

Paso 2: Crear el archivo HTML

Al comprender la definición de las clases de CSS, puede aplicarlas a algún texto de muestra.

Cree y abra un archivo llamado index.html en el editor de su preferencia. Asegúrese de ponerlo en la misma carpeta que main.css:

nano index.html

Añada el siguiente contenido, que asociará main.css como su stylesheet y, luego, aplicará las clases a un bloque de texto de muestra:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSS</title>
<link href="main.css" rel="stylesheet">
</head>

<body>
<p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

Asignó el estilo de ajuste estándar al primer bloque de texto, el estilo nowrap al segundo, y nowrap que está oculto (hidden) con ellipsis al tercero. Asignó sammy-wrap a la cuarta muestra, pero está anulando el ajuste predeterminado insertando espacios sin salto ( ) directamente en el HTML. Si necesita evitar los saltos de línea como caso excepcional, los espacios sin salto pueden ser una solución rápida.

Abra index.html en un navegador web y vea sus resultados. Sus cuatro bloques de texto aparecerán así:

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Personalizó correctamente las propiedades de CSS para evitar o permitir saltos de línea de cuatro maneras diferentes.

Conclusión

En este tutorial, utilizó CSS para evitar saltos de línea en un bloque de texto. Personalizó el texto dentro de un cuadro y, luego, añadió la propiedad white-space para anular el ajuste de texto predeterminado. Para obtener más información sobre cómo manejar el ajuste de texto y los espacios en blanco, considere la posibilidad de explorar toda la propiedad white-space de CSS.