Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    80-column fixed-width column of test in CSS?

    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!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Are you talking about styling a <p> tag?

    like ex...
    Code:
    p {
    width:300px;
    height:300px;
    font-family:Arial;
    font-size:12px;
    }
    Not sure if that is what you mean?

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Then dont attach a width to the div, that way it will grow with the amount of content.

  • #6
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    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.

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    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.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by tdoggette View Post
    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
    Last edited by effpeetee; 05-21-2008 at 04:39 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    Code:
    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.

  • #10
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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?

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by tdoggette View Post
    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

    or Here.

    or perhaps Here

    or yet again Here?
    Last edited by effpeetee; 05-21-2008 at 05:56 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    tdoggette (05-21-2008)

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by tdoggette View Post
    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:

    Code:
    #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.

  • #13
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    I don't think so.

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

    Perhaps it will help you.

    Here

    or Here.

    or perhaps Here

    or yet again Here?
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •