Como impedir quebras de linha usando CSS

Introdução

Os desenvolvedores geralmente gostam de quebrar o texto em uma página Web. A quebra de texto restringe o texto de certa forma e impede problemas de design. A quebra de texto pode também impedir a rolagem horizontal. Mas há momentos em que é desejável que blocos de texto permaneçam na mesma linha, independentemente do comprimento. É possível evitar quebras de linha e a quebra de texto para elementos específicos usando a propriedade white-space do CSS.

Neste tutorial, você irá estilizar o mesmo bloco de texto de quatro maneiras diferentes, primeiro com quebras de linha e então três vezes sem quebras de linha:

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.

Isso irá lhe dar várias opções para quebrar ou não o seu texto.

Pré-requisitos

Para completar este tutorial, você precisará de:

• Um editor de códigos de sua escolha, como o nano ou o Visual Studio Code
• Um navegador Web
• Um bom entendimento de fundamentos de HTML. Veja nossa série de tutoriais Como construir um site com HTML para uma introdução.

Passo 1 — Prevenindo e forçando quebras de linha em CSS

Neste passo, será criado uma folha de estilos com três classes diferentes. Cada uma irá lidar com quebras de linha de maneira diferente: a primeira irá quebrar o texto da forma padrão, enquanto a segunda e terceira irão forçar o texto a não criar uma nova linha e quebrar.

Primeiro, crie e abra um arquivo chamado main.css usando o nano ou o seu editor preferido:

nano main.css

Adicione o conteúdo a seguir, que irá introduzir três classes CSS que usam diversas propriedades, incluindo a 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;
}

Sua primeira classe é .sammy-wrap. Ela define seis propriedades de CSS comuns, incluindo border-radius, background-color, border max-width, padding e margin-bottom. Essa classe irá criar uma caixa visual, mas não define nenhuma propriedade especial de quebra de texto. Isso significa que ela irá quebrar linhas da maneira padrão.

A sua segunda classe é .sammy-nowrap-1. Ela define a mesma caixa que .sammy-wrap, mas dessa vez é adicionada outra propriedade: white-space. A propriedade white-space possui diversas opções, sendo todas elas responsáveis por definir como tratar o espaço em branco dentro de um dado elemento. Aqui, você definiu white-space para nowrap, o que impede todas as quebras de linha.

Sua terceira classe é .sammy-nowrap-2. Ela adiciona white-space e duas propriedades adicionais: overflow e text-overflow. A propriedade overflow lida com o scrollable overflow, que ocorre quando o conteúdo dentro de um elemento se estende para além das bordas desse elemento. A propriedade overflow pode tornar esse conteúdo rolável, visível ou oculto. Você está definindo overflow para hidden e então usando a propriedade text-overflow para adicionar ainda mais personalização. O text-overflow pode ajudar a sinalizar ao usuário que o texto adicional permanece oculto. Você definiu ela para ellipsis, de forma que sua linha não irá quebrar nem estender-se para além da caixa. O CSS irá ocultar o overflow e sinalizar o conteúdo oculto com um ....

Salve e feche o seu arquivo.

Agora que você tem uma folha de estilos, tudo está pronto para criar um arquivo HTML pequeno com um texto de amostra. Em seguida, você irá carregar a página Web em um navegador e inspecionar como o CSS é capaz de impedir quebras de linha.

Passo 2 — Criando o arquivo HTML

Com suas classes CSS definidas, aplique-as em algum texto de amostra.

Crie e abra um arquivo chamado index.html em seu editor de preferência. Certifique-se de colocá-lo na mesma pasta que main.css:

nano index.html

Adicione o conteúdo a seguir, que irá associar o main.css como sua stylesheet e então aplicar suas classes a um bloco de texto de amostra:

<!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>

Foi atribuído seu estilo de quebra de texto padrão ao primeiro bloco de texto, seu estilo nowrap ao segundo e nowrap, que está hidden com ellipsis ao terceiro. Foi atribuído sammy-wrap à quarta amostra, mas a quebra de texto padrão está sendo substituída inserindo espaços não separáveis ( ) diretamente no HTML. Se for necessário evitar quebras de linha em uma situação única, então espaços não separáveis podem fornecer uma solução rápida.

Abra o index.html em um navegador Web e veja seus resultados. Seus quatro blocos de texto aparecerão desta forma:

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.

Você personalizou suas propriedades CSS para impedir ou permitir quebras de linha de quatro maneiras diferentes com sucesso.

Conclusão

Neste tutorial, você usou o CSS para impedir quebras de linha em um bloco de texto. Você estilizou o texto dentro de uma caixa e então adicionou a propriedade white-space para substituir a quebra de texto padrão. Para aprender mais sobre o manuseamento da quebra de texto e do espaço em branco, considere explorar toda a propriedade white-space do CSS.