text-indent的用法

時間 2019-12-01

標籤 text indent 用法欄目 HTML 简体版

原文原文鏈接

1、text-indent應用於塊級元素css

　　<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:12px;
            color:#333;
        }
        p{text-indent:2em;background-color:#f00;color:#fff;}
    </style>
</head>
<body>
    <p>攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網攜程旅行網</p>

咱們也能夠經過負的text-indent來製做一些效果：spa

<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:12px;
            color:#333;
        }
        p{
            text-indent:-6em;padding-left:6em;
        }
    </style>
</head>
<body>
    <p>攜程旅行網：中國領先的在線旅行服務公司，創立於1999年，總部設在中國上海。攜程旅行網向超過五千餘萬註冊會員提供包括酒店預訂、機票預訂、度假預訂、商旅管理、高鐵代購以及旅遊資訊在內的全方位旅行服務。目前，攜程旅行網擁有國內外五千餘家會員酒店可供預訂，是中國領先的酒店預訂服務中心，每個月酒店預訂量達到五十餘萬間夜。在機票預訂方面，攜程旅行網是中國領先的機票預訂服務平臺，覆蓋國內外全部航線，並在四十五個大中城市提供免費送機票服務，每個月出票量四十餘萬張。</p>

2、text-indent應用於行內元素code

　　沒有效果；blog

3、text-indent應用於替換元素ip

　　這裏以應用到image與input元素爲例進行說明，input

<img src="pic_ad1.png" alt="" style="text-indent:2em;" />
    <br />
    <input type="text" value="ctrip" style="text-indent:2em" />
    <br />
    <input type="text" value="攜程旅行網" style="text-indent:2em" />