Indent all but first line

Posted on 2002-05-03
Last Modified: 2008-03-17
Is it possible to indent all but the first line using CSS in a SPAN?  It would look somewhat like a list, but not bulleted.  For example, I want it to look something like this:

Line 1
   Line 2
   Line 3
   Line 4

Question by:ten_spoons
LVL 53

Expert Comment

ID: 6989101
Yes, but not with a span.  it can only be applied the block elements.  works bes with the p tag:

<p> first line of text</p>
<p style="text-indent:10px">
the rest of the stuff goes here
You cannot use a br tag within the indented text, that will end indentation

The problem with it is that yu ge and extra line feed between the pargraphs.
If you don't want that you can try it with a span this way this way:
<p>first line here<br/>
<span style="padding-left:10px">
all the rest of the stuff here

The problem with the second method is that it is unreliable for Netscrap 4, and some version of Opera
LVL 51

Expert Comment

ID: 6989172
<head><style TYPE="text/css"> p:first-line  {margin-left:-20px;} p {margin-left:50px;} </style></head>
<body><p>line 1<br>line 2<br>line 3<br></p></body>
LVL 53

Expert Comment

ID: 6989310
Yes first-line will work but only for ie5.5+, Netscrap6, and I think probably Opera.

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

LVL 51

Expert Comment

ID: 6989587
well, when talking about CSS, I'd use NS6, Opera 4.x, 5.x, 6.x, and probably IE6.x, (not shure about amaya, mozilla and Konqueror 3.x) Anything else is wasting time ...
(Cd&, think you already know this, 'cause I've seen you posting this sevaral time:-)

Accepted Solution

TenTonJim earned 100 total points
ID: 6991474

Author Comment

ID: 6994752
Thank you everybody for the suggestions.  TenTonJim's just worked best for the situation.

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

770 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