Page 1 of 1

Paragraph display...

Posted: Wed Apr 13, 2005 5:27 pm
by Todd_Z
I want to be able to show a paragraph, of varying length on a "piece of paper" with red lines under each line. Also, I want the paragraph to be indented. I was hoping that I could use a <p> tag and use text-indent && some way to underline each line of the text. However, if i use a border-bottom, it only borders the very bottom of the text wrap. Any ideas? Or am i going to have to split the string up into lines of text and make a <p> tag for each line?

Posted: Thu Apr 14, 2005 1:34 am
by phpScott
you should be able to use some css and set a text-style:underline and change the underline color, but I don't remember that at the moment

Posted: Thu Apr 14, 2005 2:26 am
by n00b Saibot
phpScott wrote:you should be able to use some css and set a text-style:underline and change the underline color, but I don't remember that at the moment
I don't think that's possible...
Todd_Z wrote:Or am i going to have to split the string up into lines of text and make a <p> tag for each line?
You have to...

Posted: Thu Apr 14, 2005 10:19 am
by pickle
Hmmm... If you put the text in a single <span> element, and set the bottom border to that element, I believe the bottom border will follow the text when it wraps:

Code: Select all

CSS:
  .paper_span{
    border-bottom:1px solid #FF0000;
}

Page:
<span class = 'paper_span'>
&quote;This is some really long, repeated,  repeated,  repeated,  repeated,  repeated, text to use in my example.&quote;
</span>
To indent the text in this example, you'd probably need to use 'margin-left:10px;'

Edit:
This is what it looks like:
Image

Posted: Thu Apr 14, 2005 10:55 am
by John Cartwright
Moved to Client-Side

Posted: Thu Apr 14, 2005 11:34 am
by phpScott
oh well at least I had the use of css, just the wrong thing. I will test to make sure.
Although it does look like pickle has done it agian

Posted: Thu Apr 14, 2005 2:35 pm
by Todd_Z
I want the whole line to be underlined though, plus the indentation for only the first line.
If the text wraps with 30px to go til the end of the line, then the border stops there too :(

Posted: Thu Apr 14, 2005 3:18 pm
by pickle
Indenting the first line can be solved by adding a 'margin:20px' or whatever size, to the class definition. As for making the whole line underlined, I'm stumped.

If you want it that fine tuned, you'll have to do what was mentioned earlier - split up the string and put it in paragraphs. However, that won't stop the text from wrapping anyway when the screen resolution gets too small. You could try using table cells and setting the 'nowrap' attribute - that might work.