CSS text-indent 屬性

admin發表於2017-02-22
CSS

此屬性可以設定元素中文字的縮排。

對塊級和內聯塊級元素有效，內聯物件要使用該屬性必須先使該物件表現為塊級或內聯塊級。

語法結構:

[CSS] 純文字檢視 複製程式碼
text-indent：[ <length> | <percentage> ] && hanging? && each-line?

引數解析:

（1）.length:用長度值指定文字的縮排，可以為負值。

（2）.percentage:用百分比指定文字的縮排，可以為負值。

（3）.each-line：縮排作用在容器第一行或者內部的每個強制換行的首行，軟換行不受影響（CSS3）。

（4）.hanging：反向所有被縮排作用的行（CSS3）。

hanging和each-line關鍵字緊隨在縮排數值之後。

瀏覽器支援:

（1）.IE劉拉起支援該屬性。

（2）.edge瀏覽器支援該屬性。

（3）.谷歌瀏覽器支援該屬性。

（4）.火狐瀏覽器支援該屬性。

（5）.opera瀏覽器支援該屬性。

當前暫無瀏覽器支援hanging和each-line關鍵字。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.test p{border:1px solid #000;}
.inline span{text-indent:30px;}
.inline-block span{display:inline-block;text-indent:30px;}
.block span{display:block;text-indent:30px;}
.other{text-indent:30px;}
.other ins{display:inline-block;background:#eee;}
</style>
</head>
<body>
<ul class="test">
  <li class="inline">
    <strong>內聯元素span</strong>
    <p><span>左邊有沒有30px的縮排span{text-indent:30px;}</span></p>
  </li>
  <li class="inline-block">
    <strong>被設定為內聯塊級元素的span</strong>
    <p><span>左邊有沒有30px的縮排span{display:inline-block;text-indent:30px;}</span></p>
  </li>
  <li class="block">
    <strong>被設定為塊級元素的span</strong>
    <p><span>左邊有沒有30px的縮排span{display:block;text-indent:30px;}</span></p>
  </li>
  <li class="other">
    <strong>包含有內聯塊的塊級元素</strong>
    <p>
      <span>左邊有沒有30px的縮排</span>
      <ins>我是一個被插入的內聯塊元素</ins>.other{text-indent:30px;}
    </p>
  </li>
</ul>
</body>
</html>

相關文章