<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
p{
text-indent:2em;
}
a{ text-decoration:none; }
p{
text-shadow:2px 3px 5px green;
}
div{
width: 600px;
height: 300px;
border:1px solid red;
text-align:center;
}
.box{
width: 300px;
height: 400px;
border:1px solid red;
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
letter-spacing: 2em;
/*vertical-align: middle;
display: table-cell;*/
}
</style>
</head>
<body>
<!--
文本
text-indent: 首行縮進 em
-decoration: 文本修飾
overline 上劃線
underline 下劃線
line-through 刪除線
none 取消劃線
-shadow:
length 陰影偏移量
color 陰影顏色
blur 陰影半徑
-align: left center right
-overflow
ellipsis 文本超出部分用省略號代替 需要跟overflow配合
如果是中文的話, 先強制將中文轉(zhuǎn)成一行
white-space:nowrap;
title 鼠標懸停顯示內(nèi)容
letter-spacing 字符間距
vertical-align:
top
middle
bottom
-->
<p>中午去ATM存錢,排隊時后面的美女問我:“存錢是嗎?” “嗯” “我正好要取錢,反正你要存,不如把錢給我,咋倆就不用排隊了” 我一想覺得挺有道理,就把錢給她了。。。然后一臉懵逼的看著美女走了.....</p>
<a href="">這兩天日子不順, 出門忘記看黃歷</a>
<div>
最好的朋友:睡在我上鋪的兄弟。 最愛的女孩:同桌的你。最難忘的事:睡在我上鋪的兄弟帶走了同桌的你。
</div>
<div class='box'>aaaaaaaaaaaaabbbbbbbbbbbbbbbbbvvvvvvvvvvvvvvvvcccccccccccccccc</div>
<div class='box' title='乘地鐵遇到個牛人。 地鐵上,一哥們兒的鈴聲大作,眾乘客一聽: “爺爺,那孫子又給您來電話了… 爺爺,那孫子又給您來電話了… 爺爺,那孫子又給您來電話了?!?只見那哥們兒慢慢悠悠的掏出手機接聽,說道: “喂!爸,什么事..”' >乘地鐵遇到個牛人。 地鐵上,一哥們兒的鈴聲大作,眾乘客一聽: “爺爺,那孫子又給您來電話了… 爺爺,那孫子又給您來電話了… 爺爺,那孫子又給您來電話了?!?只見那哥們兒慢慢悠悠的掏出手機接聽,說道: “喂!爸,什么事..”</div>
</body>
</html>
文本縮進修飾上下劃線陰影省略鼠標懸停顯示內(nèi)容字符間距
最后編輯于 :
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
相關閱讀更多精彩內(nèi)容
- 一.題目中問題一拆為二: (1) 文字在超出長度時,如何實現(xiàn)用省略號代替?(2) 超長長度的文字在省略顯示后,如何...
- 第一種懸停方法: 注:不過此方法不能完全模擬鼠標懸停,而且會導致二級菜單閃現(xiàn),需要用到JavaScript 第二種...