...

View Full Version : 80-column fixed-width column of test in CSS?



tdoggette
05-21-2008, 04:42 PM
How can I style a paragraph to have a specific number of text columns of fixed-width text in CSS? I know I could style it that way manually and use <pre> tags, but I was hoping that there is a way to do it in CSS.

Thanks!

jcdevelopment
05-21-2008, 04:50 PM
Are you talking about styling a <p> tag?

like ex...


p {
width:300px;
height:300px;
font-family:Arial;
font-size:12px;
}


Not sure if that is what you mean?

effpeetee
05-21-2008, 04:54 PM
How can I style a paragraph to have a specific number of text columns of fixed-width text in CSS? I know I could style it that way manually and use <pre> tags, but I was hoping that there is a way to do it in CSS.

If you fix the width of the div and use a non-proportional font; would that not work?

FRANK

tdoggette
05-21-2008, 05:03 PM
I want the width of the paragraph to expand if text grows bigger, like if someone were to ctrl+. Every line having 80 characters of a fixed-width font in the paragraph, no matter what.

jcdevelopment
05-21-2008, 05:13 PM
Then dont attach a width to the div, that way it will grow with the amount of content.

tdoggette
05-21-2008, 05:27 PM
Then dont attach a width to the div, that way it will grow with the amount of content.

I know how to make a flexible-width element; I need to know how to make it have a set number of characters per line.

jcdevelopment
05-21-2008, 05:33 PM
h1 {
font:whatever;
color:whatever;
width:/*set a width of how long u want the line to be*/
}

Is that what you are looking for? Other then that you may need JS.

effpeetee
05-21-2008, 05:34 PM
I know how to make a flexible-width element; I need to know how to make it have a set number of characters per line. This means RIGID not FLEXIBLE.

A set number of characters per line suggests a fixed width not a flexible one, surely.
(80 x 14)px per line/each line/ means (80 x 14)px each line. NO VARIATION.

You can't have it both ways. Can you?

If you do a control+ it expands the text, but still keeps the same number per line. It just adds the scroll bar.

Try it on any page of this forum.

Frank

tdoggette
05-21-2008, 05:39 PM
h1 {
font:whatever;
color:whatever;
width:/*set a width of how long u want the line to be*/
}

Is that what you are looking for? Other then that you may need JS.

No, width is pixels, ems, or percentage, not characters.

tdoggette
05-21-2008, 05:42 PM
This means RIGID not FLEXIBLE.

A set number of characters per line suggests a fixed width not a flexible one, surely.
(80 x 14)px per line/each line/ means (80 x 14)px each line. NO VARIATION.

You can't have it both ways. Can you?

If you do a control+ it expands the text, but still keeps the same number per line. It just adds the scroll bar.

Try it on any page of this forum.

Frank

Okay, my goal is this: I have a paragraph within a div. The div expands to the width of its contents, no problem. The text in the paragraph needs to be 80 characters per line, NO MATTER WHAT. Is that possible to do with CSS?

effpeetee
05-21-2008, 06:05 PM
Is that possible to do with CSS?.
I don't think so.

This is all that I have been able to find so far.

Perhaps it will help you.

Here (http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/)

or Here. (http://support.microsoft.com/kb/198649)

or perhaps Here (http://www.netmechanic.com/news/vol2/design_no4.htm)

or yet again Here? (http://www.cs.tut.fi/~jkorpela/forms/textarea.html)

rmedek
05-21-2008, 07:55 PM
Okay, my goal is this: I have a paragraph within a div. The div expands to the width of its contents, no problem. The text in the paragraph needs to be 80 characters per line, NO MATTER WHAT. Is that possible to do with CSS?

As far as I know, there's no real way to do that with just CSS. You can come close, by defining the width of the container in ems, which will make the width relative to the font-size, but since ems are calculated by font height the numbers aren't exact and will need some fudging:


#container {
font-family: courier;
width: 50em; /* more or less 80 chars wide on Safari with a default text size */
}

A better thing to do, I think, if it were absolutely necessary to keep a strict character count, would be to use an em-defined width in your CSS but Javascript to count the characters as they are displayed and wrap the text automatically.

tdoggette
05-21-2008, 10:32 PM
I don't think so.

This is all that I have been able to find so far.

Perhaps it will help you.

Here (http://www.scriptygoddess.com/archives/2003/06/03/limit-width-of-text-in-characters/)

or Here. (http://support.microsoft.com/kb/198649)

or perhaps Here (http://www.netmechanic.com/news/vol2/design_no4.htm)

or yet again Here? (http://www.cs.tut.fi/~jkorpela/forms/textarea.html)

Thank you very much. In the comments of your first link, there is a suggesting to use the unit ex, which is the height of an X in the font. I think it's just what I'm looking for.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum