为什么图标中有点？

Question

这些是我预期的图标

但是在我设置之后

width: 31px !important;    
height: 31px !important;

它们看起来像这样：

为什么他们得到那些点？我该如何解决？

.btn-datatable {
    background-color: #F4A800 !important;
    border: none !important;
    color: #1F2D32 !important;
    width: 31px !important;
    height: 31px !important;

}

Answer 1

问题是由于属性关于当文本溢出时该怎么做，它比它的容器大，有一些方法可以处理它。最常见的是 clip，它基本上将文本剪切到合适的位置，而 ellipsis 是使用 ... 来表示有更多内容。您可以在 text-overflow.

阅读更多相关信息

div {
  white-space: nowrap;
  overflow: hidden;
}

.wrap {
  white-space: normal;
}

.ellipsis {
  text-overflow: ellipsis;
}

.clip {
  text-overflow: clip;
}

.container {
  width: 121px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

<div class="container">
  <div class="wrap">Looooooooooong text</div>
  <div>Short text</div>
  <div class="clip">Short text</div>
  <div class="ellipsis">Short text</div>
  <div class="clip">Looooooooooong text</div>
  <div class="ellipsis">Looooooooooong text</div>
</div>

为什么图标中有点？

Why dots in the icons?

html

css

font-awesome