CSS3文字超出长度出现省略号text-overflow


关键词

CSS3 text-overflow 省略号

摘要

CSS3中通过text-overflow来设置文字超出指定长度后变成省略号,但还有三个条件就是:固定长度、超出隐藏、文本不换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.text-overflow{
    width: 200px;
    height: 40px;
    border: 1px solid red;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
</head>
<body>
    <div class="text-overflow">CSS3中通过text-overflow来设置文字超出指定长度后变成省略号,但还有三个条件就是:固定长度、超出隐藏、文本不换行。CSS3中通过text-overflow来设置文字超出指定长度后变成省略号,但还有三个条件就是:固定长度、超出隐藏、文本不换行。</div>
</body>
</html>

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:CSS3文字超出长度出现省略号text-overflow:http://www.splaybow.com/post/text-overflow-ellipsis820182505.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« js数组、jquery数组及json数组