如果甚至没有单个字符，则隐藏省略号答案

【问题标题】：Hide ellipses if there is not even single character with it如果甚至没有单个字符，则隐藏省略号
【发布时间】：2019-07-05 03:57:59
【问题描述】：

我有一个带有图标和一些文本的按钮。目前我在文本溢出上显示省略号。但如果只显示椭圆，我只想显示图标而不是椭圆。

就像下面的例子一样，因为连一个带省略号的字符都没有，只显示了三个点 (...)。我想隐藏以隐藏这三个点并仅显示带有图标的按钮。

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

【问题讨论】：

在 Firefox 上，我看到 bu（带有“u”剪切）而不是 ...。我认为最好的方法是用 JS 检查尺寸以查看它是否合适，我（个人）不知道只能在 CSS 中做到这一点
这在 Firefox 上无法重现。
我不想隐藏文本，我可以接受带有省略号的文本。例如，即使文本像“b...”也是可以接受的。我只想隐藏省略号，当它甚至不包含单个文本字符时，它只显示为“...”。
虽然我很惊讶没有办法使用 CSS 来做到这一点，但我也不希望这种特定的溢出情况有特殊的行为。省略号在指示文本被隐藏方面具有重要的语义作用，无论溢出文本的任何部分是否可见。

标签： javascript html css flexbox

【解决方案1】：

不确定这是否完全适用于您要查找的内容，但乍一看似乎。

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

【讨论】：

不确定它是否有效，这里的图标和文本在按钮之外，它有 6px 高度..