Comments on: Limit width of text in characters http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/ Wed, 08 Oct 2008 11:07:28 +0000 http://wordpress.org/?v=2.6.2 By: Dave http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-11959 Dave Wed, 30 Jun 2004 13:05:53 +0000 http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-11959 One useful application of this is a way to limit the maximum width of text. Text with more than 50-80 characters per line is hard to read. Now, while not all browsers support this, those that are using browsers that do will have a better experience on a site. It is especially useful on liquid sites, where on large resolutions the text becomes very hard to read. content { max-width: 40em; } One useful application of this is a way to limit the maximum width of text. Text with more than 50-80 characters per line is hard to read. Now, while not all browsers support this, those that are using browsers that do will have a better experience on a site. It is especially useful on liquid sites, where on large resolutions the text becomes very hard to read.

content {
max-width: 40em;
}

]]> By: fuddland http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9941 fuddland Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9941 <trackback /><strong>no more overlap</strong> i've hopefully finally fixed that irksome problem of the sidebar overlapping the posts if the user's browser text-size is set... no more overlap
i've hopefully finally fixed that irksome problem of the sidebar overlapping the posts if the user's browser text-size is set…

]]> By: Jennifer http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9938 Jennifer Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9938 Excellent! Thanks Lloyd! Just what I was looking for. :) Excellent! Thanks Lloyd! Just what I was looking for. :)

]]> By: Jake http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9939 Jake Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9939 awesome! Thanks for the tip! awesome! Thanks for the tip!

]]> By: Arve http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9940 Arve Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9940 While ex theoretically is a fine suggestion, please remember that Mozilla handles ex differently from other browsers, so your results many not be entirely what you expect. In Mozilla, an ex is relative to the fonts aspect ratio, and varies with which font you use, while in MSIE, Opera and Safari/Konqueror, 1ex = 0.5em. <a href="http://www.xs4all.nl/~sbpoley/webmatters/emex.html">http://www.xs4all.nl/~sbpoley/webmatters/emex.html</a> goes in more detail on this. My suggestion? If you want a <pre> that's 15 characters wide, use 7.5em for it's width. While ex theoretically is a fine suggestion, please remember that Mozilla handles ex differently from other browsers, so your results many not be entirely what you expect.

In Mozilla, an ex is relative to the fonts aspect ratio, and varies with which font you use, while in MSIE, Opera and Safari/Konqueror, 1ex = 0.5em. http://www.xs4all.nl/~sbpoley/webmatters/emex.html goes in more detail on this.

My suggestion? If you want a <pre> that's 15 characters wide, use 7.5em for it's width.

]]> By: Lloyd Dalton http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9937 Lloyd Dalton Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/#comment-9937 By "text box" are you talking about a form input, or just a <div> with text inside? You can use the "width:??ex" css property, to set an element's width to some number of characters. Where ?? is the number of characters. "ex" is the width of the letter "x" in the current font & size. See <a href="http://www.htmlhelp.com/reference/css/units.html#length">this page</a> for more information on css widths: Example: <h3> < div style="width:15ex;margin:20px;padding:5px;border:1px solid #000000;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum. </div> </h3> By "text box" are you talking about a form input, or just a <div> with text inside?

You can use the "width:??ex" css property, to set an element's width to some number of characters. Where ?? is the number of characters. "ex" is the width of the letter "x" in the current font & size.

See this page for more information on css widths:

Example:

< div style="width:15ex;margin:20px;padding:5px;border:1px solid #000000;" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.
</div>

]]>