Come prevenire le interruzioni di riga utilizzando i CSS

introduzione

Agli sviluppatori in genere piace avvolgere il testo in una pagina web. Il wrapping vincola il testo in un modo o nell'altro e previene problemi di progettazione. La disposizione del testo può anche impedire lo scorrimento orizzontale. Ma ci sono momenti in cui vuoi che i blocchi di testo rimangano sulla stessa riga, indipendentemente dalla lunghezza. Puoi impedire le interruzioni di riga e il ritorno a capo del testo per elementi specifici utilizzando la proprietà CSS white-space.

In questo tutorial, modellerai lo stesso blocco di testo in quattro modi diversi, prima con interruzioni di riga e poi tre volte senza interruzioni di riga:

Questo ti fornirà diverse opzioni per avvolgere o non avvolgere il tuo testo.

Prerequisiti

Per completare questo tutorial, avrai bisogno di:

Un editor di codice a tua scelta, come nano o Visual Studio Code
Un browser web
Un conforto con i fondamenti dell'HTML. Puoi visualizzare la nostra serie di tutorial Come creare un sito Web con HTML per un'introduzione.

Passaggio 1: prevenzione e forzatura delle interruzioni di riga nei CSS

In questo passaggio, creerai un foglio di stile con tre diverse classi. Ognuno gestirà le interruzioni di riga in modo diverso: il primo interromperà il testo nel modo predefinito mentre il secondo e il terzo forzeranno il testo a non creare una nuova riga e interrompere.

Per prima cosa, crea e apri un nuovo file chiamato main.css usando nano o il tuo editor preferito:

nano main.css

Aggiungi il seguente contenuto, che introdurrà tre classi CSS che utilizzano diverse proprietà, tra cui 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;
}

La tua prima lezione è .sammy-wrap. Definisce sei proprietà CSS comuni tra cui border-radius, background-color, border max-width, padding, e margin-bottom. Questa classe creerà una casella visiva, ma non definisce alcuna proprietà di wrapping speciale. Ciò significa che interromperà le righe nel modo predefinito.

La tua seconda lezione è .sammy-nowrap-1. Definisce la stessa casella di .sammy-wrap ma ora aggiungi un'altra proprietà: white-space. La proprietà white-space ha numerose opzioni, ognuna delle quali definisce come trattare lo spazio bianco all'interno di un dato elemento. Qui, hai impostato white-space su nowrap, che impedirà tutte le interruzioni di riga.

La tua terza lezione è .sammy-nowrap-2. Aggiunge white-space e due proprietà aggiuntive: text-overflow. La proprietà overflow gestisce l'overflow scorrevole, che si verifica quando i contenuti all'interno di un elemento si estendono oltre i bordi dell'elemento. La proprietà overflow può rendere tale contenuto scorrevole, visibile o nascosto. Stai impostando overflow su hidden e poi usando la proprietà text-overflow per aggiungere ancora più personalizzazione. text-overflow può aiutarti a segnalare a un utente che il testo aggiuntivo rimane nascosto. L'hai impostato su ellissis, quindi ora la tua linea non si interromperà né si estenderà oltre la scatola. I CSS nasconderanno l'overflow e segnaleranno il contenuto nascosto con un ....

Salva e chiudi il file.

Ora che hai un foglio di stile, sei pronto per creare un breve file HTML con del testo di esempio. Quindi caricherai la pagina web in un browser e verificherai come i CSS possono prevenire le interruzioni di riga.

Passaggio 2: creazione del file HTML

Con le tue classi CSS definite, puoi applicarle ad alcuni testi di esempio.

Crea e apri un file chiamato index.html nel tuo editor preferito. Assicurati di posizionarlo nella stessa cartella di main.css:

nano index.html

Aggiungi il seguente contenuto, che assocerà main.css come tuo foglio di stile e quindi applicherà le tue classi a un blocco di testo di esempio:

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

Hai assegnato il tuo stile di ritorno a capo standard al primo blocco di testo, il tuo stile nowrap al secondo e nowrap che è nascosto con puntini di sospensione alla terza. Hai assegnato sammy-wrap al quarto esempio, ma stai sovrascrivendo l'avvolgimento predefinito inserendo spazi unificatori ( ) direttamente nell'HTML. Se è necessario prevenire le interruzioni di riga come situazione una tantum, gli spazi unificatori possono fornire una soluzione rapida.

Apri index.html in un browser Web e visualizza i risultati. I tuoi quattro blocchi di testo appariranno così:

Hai personalizzato con successo le tue proprietà CSS per prevenire o consentire interruzioni di riga in quattro modi diversi.

Conclusione