我有一个带有图标和一些文本的按钮。目前我在文本溢出上显示省略号。但是我只想显示图标而不是省略号，如果只显示省略号的话。
如下例所示，因为连一个带省略号的字符都没有，只显示了三个点 (...)。我想隐藏以隐藏这三个点并仅显示带图标的按钮。
.btn{
display: inline-flex;
width: 46px;
text-overflow: ellipses;
overflow: hidden;
white-space: nowrap;
}
.btn .icon{
flex-shrink: 0;
margin-right: 2px;
}
.btn .text{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex-shrink: 1;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<button class="btn">
<span class="icon"><i class="fa fa-html5"></i></span>
<span class="text">button</span>
</button>
</body>
</html>最佳答案
不确定这是否完全适用于您正在寻找的东西，但乍一看似乎是这样。
.btn{
display: inline-flex;
position: relative;
}
.btn .icon{
position: absolute;
left: 0px;
}
.btn .text{
position: absolute;
left: 20px;
text-align: left;
max-width: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex-shrink: 1;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<button class="btn">
<span class="icon"><i class="fa fa-html5"></i><span class="text">testing</span></span>
</button>
</body>
</html>关于javascript - 如果连单个字符都没有，则隐藏省略号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56891766/