Tutorial

Cómo evitar saltos de línea con CSS

Published on December 15, 2020
Default avatar

By Alligator.io

Español
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:

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:

  1. nano main.css

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

./main.css
.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:

  1. 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:

./index.html
<!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 (&nbsp;) 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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel