Utilizing white space effectively
Video: Utilizing white space effectivelyBy 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.
- Next steps
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Utilizing white space effectively
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.
There are currently no FAQs about Typography with CSS in Dreamweaver.