From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Force text to wrap

Force text to wrap - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Force text to wrap

“

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll take a look at using the Word Wrap property to ensure that long words or URLs don't break our layout. So if you'd like to follow along, download the exercise files, and let's begin by opening the HTML file in a text editor. Now, once you have the HTML file open, up in the head area, we have a link to style.css. We'll be opening this in a moment. If you scroll down the page, inside of the body area, we have a main element, and inside of the main element we have an h1, an article, and an aside. What we're going to be doing in the CSS is setting the article and the aside to render as columns, so they'll both be vertical, side by side. Now, if we look at this in a browser, the challenge is going to be the fact that we show the URLs here, and the URLs are really long. So if we put this into a small column, it's going to be too wide. So to fix this, let's go back to the exercise files, let's find style.css, and let's open…

Contents