純css實現單行」截取「

時間 2019-11-30

標籤 css 實現單行截取欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純css實現單行」截取「</title>
<style type="text/css">
*{ font-size:14px;}

.zxx_text_overflow_4{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow_4 .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}

</style>
</head>
<body>

<div class="zxx_text_overflow_4">
    <div class="text_con">這是一段比較長的文字，用來測試是否文字溢出時會用省略號顯示。</div>
    <div class="text_dotted">…</div>
</div>
<div style="background:red; height:40px;">嘎嘎嘎</div>

</body>
</html>

　　簡要說明：當文字內容足夠長時就把隱藏在上面的省略號層給擠下來了。關鍵就是點點點所在div層的高度的絕對值要比其margin的絕對值大那麼一點點。若是您不習慣用em作單位，直接換做px就能夠了，效果是同樣的。css

原文地址：http://www.zhangxinxu.com/wordpress/?p=230html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。