text-indent

I have several paragraphs that I would like to indent, although only the first lines of these paragraphs. How would I target just the first lines using CSS or HTML? Use the text-indent property. p { text-indent: 30px; } jsFiddle . In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles. p:first-line { color:red; } p { text-indent:40px; } http://jsfiddle.net/Madmartigan/d4aCA/1/ Very simple using css: p { text-indent:10px; } Will create an indentation of 10 pixels in every paragraph. I was also having a problem getting the first line of a

（1） 使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block 而我们往往有时候想偏移掉的a上的字体 所以问题就来了 text-indent:-9999px;虽然用起来比较惬意 将a转化成block的话 往往 他身后的的元素就被他赶到下一行了 如果正好这个a后面 是一个a按钮 就要用float来浮动以使他身后再出现簇拥者 这样是不是有些麻烦呢 （2） line-height:0; font-size:0; overflow:hidden; 能完美“隐藏”掉你background之上的字体 经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过 （3） 最方便的是加个span，然后display:none，而且这样不会出bug。 遗憾的是，多了个标签，循环中使用的话，html又多了一堆字节，单个按钮推荐这样使用。 而针对input value的隐藏这个方式就有些吃力了 所以还是只能用block加text-indent来“偏移”模拟隐藏了 display:block; font-size:0; line-height:0; text-indent:-9999px; 经测试 ie6.0 、 7.0 、firefox 3.010 通过 转载于:https://www.cnblogs.com/hakuci/archive/2011

This article say we should avoid using this technique. This one says it's awesome. Is it true that Google looks inside CSS files for text-indent: -9999px; and punishes you? :| I'm using that property a lot to hide text. For example, I have a button that is represented by an icon: <a href="#" class="mybutton">do Stuff</a> The CSS: .mybutton{ text-indent: -9999px; background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px; display: block; width: 16px; height: 16px; } I don't see any alternative to my code. If I replace that with an image I automatically get +20 HTTP requests