Max-width

Set the maximum width of an element.

Syntax
      max-width: length | percentage | none | inherit ;

Length - The max width in px, pt or em.
percentage - The max width as a percentage value
none - No limit on the width. (default)
inherit - inherit from the parent element.
min-content - The intrinsic minimum width. Experimental/CSS 3. (Firefox moz-min-content and Chrome webkit-min-content).
max-content - The intrinsic preferred width. Experimental/CSS 3. (Firefox moz-max-content and Chrome webkit-max-content).
fill-available - The containing block width minus horizontal margin, border and padding. Experimental /CSS 3
available - An ancient name for fill-available (some browsers only)

Having the right number of characters on each line of text is key to good readability, in typographic terms this is known as the 'measure'. Robert Bringhurst in "The elements of Typographic style" recommends 45 to 75 characters per line, 66 characters per line is widely considered the ideal. A width of 600px will hold around 75 characters of 18px text.

Examples:
p { max-width: 500px; }
.ss64class { max-width: 25em; }

#SS64id { max-width: 400pt; }

Try it:

This is a sample of text with a CSS border. The border helps to display the width of the element.

(CSS 2) Browser Support: All major browsers.

“Somebody should tell us, right at the start of our lives, that we are dying. Then we might live life to the limit, every minute of every day. Do it! I say. Whatever you want to do, do it now! There are only so many tomorrows” ~ Pope Paul VI

Related:

wc bookmarklet to count characters/words
width - Width of an element
min-width - Minimum width of an element
height - Height of an element
box-sizing - The CSS box model used to calculate the height and width of elements.


© Copyright SS64.com 1999-2014
Some rights reserved