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.
If a text container has a CSS property font-size: 16px; (The default font size for most browsers), then 1 em will represent 16px, and you can use this when specifying the container width. Let’s say width: 38em; (or 38rem;) the container width will then represent 16px × 38 = 608px.
In HTML 5 you can specify the width directly in characters with the ch unit, So for 66 characters per line: max-width: 66ch;
Internet Explorer interprets 1ch as the width of the 0 glyph, without the surrounding space. This makes 1ch shorter in IE compared to any other browser.
To make the element fit the width of the text exactly, use display: inline-block; or display: table;
Examples:
p { max-width: 38rem; }
.emw3class { max-width: 25em; }
#emw3id { max-width: 66ch; }
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:
display - Display an HTML element as a list/table/block.
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.