New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Utilizing white space effectively

From: Typography with CSS in Dreamweaver

Video: 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.

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.

Show transcript

This video is part of

Image for Typography with CSS in Dreamweaver
Typography with CSS in Dreamweaver

36 video lessons · 7995 viewers

Joseph Lowery
Author

 
Expand all | Collapse all
  1. 3m 52s
    1. Welcome
      1m 19s
    2. Using the exercise files
      2m 33s
  2. 19m 16s
    1. Working with the Property inspector's HTML tab
      2m 0s
    2. Making the most of the Property inspector's CSS tab
      4m 57s
    3. Defining and changing type with the CSS Rule Definition dialog
      6m 16s
    4. Modifying type directly in the CSS Styles panel
      6m 3s
  3. 19m 45s
    1. Understanding type measurement unit options
      2m 50s
    2. Working with pixels
      2m 34s
    3. Defining a percentage-based page with ems
      6m 51s
    4. Letting users set page type size
      7m 30s
  4. 17m 36s
    1. Getting to know the basic font categories
      1m 32s
    2. Employing web-safe fonts
      3m 20s
    3. Defining new font families
      3m 22s
    4. Exploring CSS3 typeface options
      3m 9s
    5. Setting up @font-face
      6m 13s
  5. 9m 39s
    1. Dispelling the myth of web-safe colors
      1m 13s
    2. Applying color to type
      4m 52s
    3. Incorporating semi-transparent type
      3m 34s
  6. 19m 46s
    1. Setting the font-weight
      3m 48s
    2. Mandating font case
      2m 25s
    3. Exploring font variants
      1m 50s
    4. Utilizing white space effectively
      3m 40s
    5. Changing letter and word spacing
      2m 20s
    6. Defining first-line variations
      2m 19s
    7. Inserting drop caps
      3m 24s
  7. 20m 17s
    1. Applying CSS3 text effects
      5m 26s
    2. Designing type gradients
      8m 27s
    3. Rotating text with CSS transform
      6m 24s
  8. 15m 21s
    1. Implementing advanced headings with HTML5
      3m 11s
    2. Preparing CSS3 multiple-column layout
      4m 50s
    3. Future type: Defining CSS Regions
      7m 20s
  9. 24m 51s
    1. Styling unordered lists
      6m 51s
    2. Specifying a sequence with ordered lists
      5m 14s
    3. Applying definition lists
      7m 19s
    4. Targeting list items with CSS3 nth child
      5m 27s
  10. 20s
    1. Next steps
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.