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

最新推荐文章于 2024-06-22 21:06:26 发布

weixin_34352449

最新推荐文章于 2024-06-22 21:06:26 发布

阅读量234

点赞数

原文链接：https://my.oschina.net/taadis/blog/1592610

版权

为什么80%的码农都做不了架构师？>>>

实现

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