Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
By default, browsers ignore any additional white-space in the code beyond a single space to separate words and all line breaks. There are situations however, where you might need the white-space in your text to render in a non-default custom manner. The white-space CSS property offers a number of options for you to use. Here is a table that shows all the available white-space values. You can see the example code that I'm using here where there are some additional spaces between the words extra and spaces and then also surrounding the word and, and there is a couple of additional line breaks in the code.
Now let's look at the various values and their effect. White-space: normal displays the Browser default which ignores the extra spaces and any line breaks in the code. White-space: pre works just like the pre-tag where the text is rendered exactly as it is in the code completely with the extra spaces and line breaks. Now if there are any natural line breaks, meaning where the containing element is too narrow for the text, no natural line breaks or wrapping will occur.
Let's move down to white-space: nowrap. With the nowrap value extra spaces are ignored. You see that we don't have any additional spaces here as we do up in the pre value, and the line will not break even if wrapping should occur because of space limitations. Now the pre-line value ignores the extra spaces, just like normal, but it will honor any line breaks in the code. And finally pre-wrap is very similar to the pre-value, except it will honor any natural line breaks that might occur.
Well those are all the values. Let's take a look at a real-world situation. So I'm going to open tours.htm, that's found in the Chapter 5 > 05_04 folder, and let's go down to our tour descriptions, where you'll see that there is a Read more link with a double carrot symbol following it, and we want to keep those two words and the symbol all together so that we don't have any sort of unnatural breaks. Let me show you an example of a break. So I'll go into the bottom here and let's make that instead of Packages, let's make that Affordable Packages, and now we have the link breaking onto two lines.
It would be much better if it all appeared on one line, either on the same line of the paragraph as we see up here or on the line below. So to do that what I'm going to do is create a new CSS style. I'll expand all of my panels and here in the Tag Selector you can see that there's a class applied to this link, Read more, so we'll take advantage of that and create a new Rule. I'll click on New CSS Rule and make it a little less specific, and then click on OK.
Now the white-space property is displayed in the Block category in Dreamweaver's CSS Rule Definition dialog box. So we'll go there, and then from White-space, choose nowrap. Now you'll notice that not all five values are here. Dreamweaver currently does not have all five of the values listed in the CSS Rule Definition dialog box, however they are available through code hints. So if you wanted to use the pre-line or pre-wrap value you would have to do that manually in your CSS. Let's click OK.
Now you see that it wraps around to the second line. Of all the white-space values, you'll probably find nowrap and pre to be among the most useful, but it's good to know what your other options are, just in case you have a need.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.