一個(gè)網(wǎng)站都會(huì)有一個(gè) LOGO，這似乎是一條通用的布局和內(nèi)容，而對(duì)于這個(gè) LOGO 的代碼編寫(xiě)，一般都會(huì)使用 插入 LOGO 圖片，然后再寫(xiě)上文字的描述，其實(shí)這樣的方法有點(diǎn)過(guò)時(shí)了，因?yàn)檫@些描述文本只針對(duì)于這張 LOGO 圖片，而放置更多的內(nèi)容時(shí)候，搜索引擎不認(rèn)為和網(wǎng)頁(yè)的內(nèi)容有多大的關(guān)系。

text-indent

CSS中的 text-indent 屬性是設(shè)置段落文本縮進(jìn)，如果我們給他設(shè)置 text-indent:100%，那么文本將會(huì)空一行出來(lái)，通過(guò)這個(gè)屬性，我們可以應(yīng)用到我們 LOGO 布局中。

我們將 LOGO 圖片作為背景圖放置到標(biāo)簽里面，然后添加 text-indent 屬性，文本不換行，超出部分隱藏，那么這些文本將不會(huì)顯示，也不會(huì)被搜索引擎判斷為作弊。

.logo {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

background:url(images/logo.png) no-repeat;

height:24px;

width:72px;

}

在 .logo 容器里面放置再多的內(nèi)容，都不會(huì)顯示出來(lái)。

Padding

Padding 屬性用于設(shè)置元素的填充，同樣我們定義背景圖，而將 padding 設(shè)置為和容器一樣的寬度，然后容器的寬度設(shè)置為 0，那么容器里面的內(nèi)容也不會(huì)顯示出來(lái)。

.logo {

padding-left:72px;

overflow: hidden;

background:url(images/logo.png) no-repeat;

height:24px;

width:0;

}

上面兩個(gè)隱藏文本的方法不同于以往的搜索引擎作弊方法，他不是直接將文本設(shè)置 display:none; 隱藏起來(lái)，而是通過(guò)合理的計(jì)算方式，讓文本隱藏。

總結(jié)

以上是生活随笔為你收集整理的html5 css 文本缩进,使用 CSS 文本缩进和 Padding 隐藏文本 - 文章教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。