Geek Answers Handbook

CSS - Indent everything except the first line

Update 2013-01-04

  • The flexbox solution does very little additional HTML / CSS. However, it is unclear whether it can work in Firefox and IE10?
  • To add minus characters to :before with CSS content rather than HTML, this is the best way.

Information

I have a table with some content. Depending on the depth, there are several negative characters in front of the text.

Problem / question

I can’t figure out how to make the text align right and the minus characters align left even when the line breaks exactly. The number of minus and the length of the text may vary.

Example for jsfiddle

Edit it if you want ...

http://jsfiddle.net/Rjvc9/

HTML if jsfiddle is not working

 <table> <td> <span class="lines">----</span> <span class="text">My page that is far too long for it to fit on one row</span> </td> </table> <br> This is how it should work.<br><br> <table> <td> <span class="lines">----</span> <span class="text">My page that is far<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;too long for it to fit<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on one row</span> </td> </table>​

CSS if jsfiddle does not work

 table { background: #eee; width: 150px; } td { font-family: Arial; font-size: 14px; line-height: 18px; margin: 40px; }​

My thoughts

  • I could use the indentation in a smart way, but that doesn't seem to work.
  • I like the display: inline. If it can be saved in this way, be beautiful, but perhaps it is not possible?
  • It should work with fewer minus characters and longer / shorter text.
  • No need to work with old browsers.
  • I prefer CSS over jQuery / javascript.
+4
source share
6 answers

Until your cells are limited, flexbox may work here for you.

 td.dashed { display: -webkit-flex; display: flex; }

The demo works with both a range and using the contents in the element before the pad to contain the dotted line. Doesn't work on something older than IE10. Mozilla does not seem to like it, but it should support flexbox.

http://jsfiddle.net/Rjvc9/9/

0
source

Use negative text-indent !

A text-indent inserts the first line. So give it a negative value!

 .first-line {text-indent: -5em; padding-left: 5em;}
+18
source

Something like this should do this:

 display: block; padding-left: 37px; text-indent: -37px;

You will give a negative indent on the first line so that it will be put X pixels to the left. Providing the entire element with a padding to the left of the same amount of px, it will still put everything in the right place.

Also see: http://jsfiddle.net/Rjvc9/3/

Note: display: inline will not work on this. display:inline-block will be.

+3
source

Using the CSS content attribute, you can embed minus characters in a page and position / erase them without having to include them in your HTML or wrap them in any tags.

I changed your example http://jsfiddle.net/cchana/Rjvc9/2/ and now it works, providing the cell with some padding and position attribute as follows:

 td { padding: 0 0 0 24px; position: relative; }

Then I added the characters ---- to the beginning of the cell using content , and then positioned it correctly:

 td:before { content: '----'; left: 0; position: absolute; }
0
source

Since you are using the table element, put the minus characters (in fact, Ascii hyphens, formally HYPHEN-MINUS characters) in your own column. You must also make the markup valid (the td element can only be a child of tr ).

 <table> <tr> <td class="lines">----</td> <td class="text">My page that is far too long for it to fit on one row</td> </table>

In CSS, add td { vertical-align: top; } td { vertical-align: top; } . (Or add the appropriate HTML markup, <tr valign=top> , for each tr element.

By default, the columns are left-aligned and you can customize it as you wish. In modern browsers, you don’t even need class attributes, since you can use the td:first-child and td:first-child + td selectors, for example.

0
source

For built-in displays, you need to mix something using negative margin and negative text indent. The following is an example of jsfiddle working with an example:

 #thisList ul li a { color:#333; text-indent:-1.5rem; margin-left:-2rem; line-height:1; }

Js fiddle

0
source

More articles:


All Articles