Paragraph display...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Todd_Z
Forum Regular
Posts: 708
Joined: Thu Nov 25, 2004 9:53 pm
Location: U Michigan

Paragraph display...

Post 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?
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post 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
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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...
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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
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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Moved to Client-Side
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post 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
User avatar
Todd_Z
Forum Regular
Posts: 708
Joined: Thu Nov 25, 2004 9:53 pm
Location: U Michigan

Post 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 :(
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply