CSS实现单行显示文本并适应浏览器大小

实现

.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>

效果图

posted @ 2017-12-20 14:38  taadis  阅读(117)  评论(0)    收藏  举报
扫码关注

扫码关注我