学习css文本溢出显示省略号？
一、写在前面
今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面重新整理一下。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text {
display: inline-block;
width: 100px;
border: 1px solid #000;
/* 设置文本不进行换行 */
white-space: nowrap;
/* 让超出部分省略 */
overflow: hidden;
/* 超出部分使用省略号 */
text-overflow: ellipsis;
}
#text:hover {
white-space: normal;
text-overflow: clip;
}
</style>
</head>
<body>
<span id="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
</body>
</html>
1、使用white-space属性设置不换行，overflow属性隐藏超出部分，text-overflow属性添加省略号。需注意必须有固定宽度才会出现效果。二、扩展多行文本显示省略号
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text {
display: -webkit-box;
width: 100px;
border: 1px solid #000;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<span id="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
</body>
</html>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/124387721
内容来源于网络，如有侵权，请联系作者删除！
