Paragraph display...
Moderator: General Moderators
Paragraph display...
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?
- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
I don't think that's possible...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
You have to...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?
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:
To indent the text in this example, you'd probably need to use 'margin-left:10px;'
Edit:
This is what it looks like:

Code: Select all
CSS:
.paper_span{
border-bottom:1px solid #FF0000;
}
Page:
<span class = 'paper_span'>
"e;This is some really long, repeated, repeated, repeated, repeated, repeated, text to use in my example."e;
</span>Edit:
This is what it looks like:

Last edited by pickle on Thu Apr 14, 2005 11:14 am, edited 2 times in total.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
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.
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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.