实现
.text {
white-space:nowrap; /*文本不换行*/
overflow: hidden; /*超出文本隐藏*/
text-overflow:ellipsis; /*超出文本替换 clip不显示 ellipsis省略号 指定string"..."->chrome不支持*/
}
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 单行显示 text 适应browser size</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="text">12345678 12345678 12345678</div>
<p class="text">一二三四五六七八 一二三四五六七八</p>
</body>
</html>
效果图
