一個網站都會有一個 LOGO，這似乎是一條通用的布局和內容，而對于這個 LOGO 的代碼編寫，一般都會使用 插入 LOGO 圖片，然后再寫上文字的描述，其實這樣的方法有點過時了，因為這些描述文本只針對于這張 LOGO 圖片，而放置更多的內容時候，搜索引擎不認為和網頁的內容有多大的關系。

text-indent

CSS中的 text-indent 屬性是設置段落文本縮進，如果我們給他設置 text-indent:100%，那么文本將會空一行出來，通過這個屬性，我們可以應用到我們 LOGO 布局中。

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

.logo {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

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

height:24px;

width:72px;

}

在 .logo 容器里面放置再多的內容，都不會顯示出來。

Padding

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

.logo {

padding-left:72px;

overflow: hidden;

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

height:24px;

width:0;

}

上面兩個隱藏文本的方法不同于以往的搜索引擎作弊方法，他不是直接將文本設置 display:none; 隱藏起來，而是通過合理的計算方式，讓文本隱藏。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。