[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

indent all but the first line

Posted on 2000-02-22
3
Medium Priority
?
867 Views
Last Modified: 2008-02-20
I have a span inside a DIV...
(using IE5) when the span wraps inside the DIV, i'd like to indent those lines that wrapped.  Not the first lines.. only all lines that have wrapped.
thanks so much...

jack
0
Comment
Question by:hjack
  • 2
3 Comments
 
LVL 7

Expert Comment

by:nettrom
ID: 2545458
I'm not exactly sure how this would be most correctly solved, but I have a possible solution.  the logic goes:

1: add the desired indentation as a left padding of the DIV (space between the DIV's border and the content)
2: pull the first line back the same amount as the padding.

ideally I'd like to use the pseudo-class 'first-line' to solve it, but it's not supported by IE5 (I'm not sure if it's any better either).  I used 'text-indent' instead.  according to the CSS2 spec it's perfectly legal.  worked OK in Netscape 4 and IE5, didn't work in IE4 and Opera.

example uses a 25px indentation:

<div style="padding-left:25px;">
<span style="text-indent:-25px;">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi."
</span>
</div>

the indentation can be set using any legal CSS value (percentage, pixels, em, ex, points, etc), only remember to have the same amount in both places and the text-indent should be a negative value.  otherwise you'll probably not get the effect you want.
0
 
LVL 28

Accepted Solution

by:
sybe earned 600 total points
ID: 2549944
<html>

<head>
<style type="text/css">
li {list-style : none ; text-align: left; text-indent: -3%}
</style>
</head>
<body>

<li>jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg
<li>jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg fhjgfj hgfhj gfjhg fjhgfjhg fj lkhjljk lhjkg lhjghjkgkjh jkhgkj gkjhgk jhgkj gkjg ghjk jhg hjk jhg jkgkhjg jygkjgkyj jkgh gf hjkgfhjkg fjhgf jhgfhjg
</body>
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2574218
hjack, you still with us?
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question