Introduction
Developers typically like to wrap text on a web page. Wrapping constrains text in one way or another and prevents design issues. Text wrapping can also prevent horizontal scrolling. But there are times when you want blocks of text to stay on the same line, regardless of length. You can prevent line breaks and text wrapping for specific elements using the CSS white-space property.
In this tutorial, you will style the same block of text four different ways, first with line breaks and then three times without line breaks:
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.
Medusafishbandedkillifishconvictblennysaurythreadsailbelugasturgeon.Indianmulmoraciscomasusalmon,roosterfishrequiemsharklongnoselancetfishbluefishredsnapperSacramentosplittailgiantdanio.
This will provide you several options for wrapping or not wrapping your text.
Prerequisites
To complete this tutorial, you will need:
- A code editor of your choice, such as
nanoor Visual Studio Code - A web browser
- A comfort with HTML fundamentals. You can view our tutorial series How To Build a Website with HTML for an introduction.
Step 1 — Preventing and Forcing Line Breaks in CSS
In this step, you will create a style sheet with three different classes. Each one will handle line breaks differently: the first will break text in the default manner while the second and third will force the text not to create a newline and break.
First, create and open a new file called main.css using nano or your preferred editor:
- nano main.css
Add the following content, which will introduce three CSS classes that use several properties, including 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;}Your first class is .sammy-wrap. It defines six common CSS properties including border-radius, background-color, border max-width, padding, and margin-bottom. This class will create a visual box, but it does not define any special wrapping properties. This means it will break lines in the default manner.
Your second class is .sammy-nowrap-1. It defines the same box as .sammy-wrap but now you add another property: white-space. The white-space property has numerous options, all of which define how to treat white space inside a given element. Here, you have set white-space to nowrap, which will prevent all line breaks.
Your third class is .sammy-nowrap-2. It adds white-space and two additional properties: overflow and text-overflow. The overflow property handles scrollable overflow, which occurs when the contents inside an element extend beyond that element’s edges. The overflow property can make that content scrollable, visible, or hidden. You are setting overflow to hidden and then using the text-overflow property to add even more customization. text-overflow can help you signal to a user that additional text remains hidden. You have set this to ellipsis, so now your line will neither break nor extend beyond the box. CSS will hide the overflow and signal the hidden content with a ....
Save and close your file.
Now that you have a stylesheet, you are ready to make a short HTML file with some sample text. Then you will load the webpage in a browser and inspect how CSS can prevent line breaks.
Step 2 — Creating the HTML File
With your CSS classes defined, you can apply them to some sample text.
Create and open a file called index.html in your preferred editor. Make sure to place it in the same folder as main.css:
- nano index.html
Add the following content, which will associate main.css as your stylesheet and then apply your classes to a sample text block:
./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 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></body></html>You have assigned your standard wrapping style to the first text block, your nowrap style to the second, and nowrap that is hidden with ellipsis to the third. You have assigned sammy-wrap to the fourth sample, but you are overriding the default wrapping by inserting non-breaking spaces ( ) directly into the HTML. If you need to prevent line-breaks as a one-off situation, then non-breaking spaces can provide a quick solution.
Open index.html in a web browser and view your results. Your four text blocks will appear like this:
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.
Medusafishbandedkillifishconvictblennysaurythreadsailbelugasturgeon.Indianmulmoraciscomasusalmon,roosterfishrequiemsharklongnoselancetfishbluefishredsnapperSacramentosplittailgiantdanio.
You have successfully customized your CSS properties to prevent or allow line breaks in four different fashions.
Conclusion
In this tutorial, you used CSS to prevent line breaks on a block of text. You styled the text inside a box and then added the white-space property to override the default text wrapping. To learn more about handling text wrapping and white space, consider exploring the entire white-space CSS property.
)