Question

类似于此线程：How to remove extra space on right side with ellipsis 多余的空格出现在“ ...”之后，并且在较小的区域中文本未居中对齐。想知道是否有任何方法可以消除微小的多余空间。

如果提供更大的填充，则在视觉上会更好，但同时也会牺牲显示文本的区域。

enter code here

在Chrome（版本74），FF（v67），IE11（v11.0.105）和Edge（v40.15063）上运行链接只有Chrome浏览器“出现”以使文本居中对齐。

Answer 1

似乎是FF渲染页面的方式，实际上没有什么可以做的。

您可以尝试将.max-width添加到.child2，并相应地调整其填充。

.parent {
  position: relative;
  width: 36px;
  height: 36px;
}
.child1 {
  font-size: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  background: red;
}
.child2 {
   font-size: 10px;
   line-height: 20px;
   padding: 8px 6px; /*Changed 4px to 6px*/
   position: absolute;
  max-width: 24px; /*Added*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFF;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2">FDDLE</div>
</div>

Answer 2

如果我猜到了（仅在FF上测试）

在Chrome中，当文本变成省略号时，chrome将"ellipsized"文本视为一个完整的新文本，然后将其居中，以便我们复制。

.parent {
  position: relative;
  width: 36px;
  height: 36px;
}

.child1 {
  font-size: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  background: red;
}

.child2 {
  font-size: 10px;
  line-height: 20px;
  padding: 8px 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFF;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2">FD...</div>
</div>


<div class="parent">
  <div class="child1"></div>
  <div class="child2">FDDLE</div>
</div>

唯一的区别是，如果我们太担心的话，可以用字母间距来模仿点之间的间距

FF却不这样做，而是按原样考虑整个文本，现在的问题是，我们要在其他浏览器上复制chrome所需要的额外护理，我们可以使用一些JS插件来做到这一点，或者更多实际解决方案

.parent {
  position: relative;
  width: 36px;
  height: 36px;
}

.child1 {
  font-size: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  background: red;
}

.child2 {
  font-size: 10px;
  line-height: 20px;
  padding: 8px 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  right: 2px;
  text-align: center;
  color: #FFF;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2">FD...</div>
</div>


<div class="parent">
  <div class="child1"></div>
  <div class="child2">FDDLE</div>
</div>

为什么2px位于左侧和右侧？

因为在2px之后看起来不错。

div.child2的宽度为36px，在填充后内容的宽度变为36 - 4px(left) - 4px(right) = 28px，这使得28px可以容纳内容，这时chrome newers文本基本上会添加由于2px使得FF和IE忽略了该属性，因此将其居中的位置要多于text-align:center;，因此我们通过在左侧和右侧添加这些2px来使自己居中，将内容保留在28px - 2px(left) - 2px(right) = 24px 24px中，而无需将其作为max-width应用使其动态/响应

演示：如果父母决定长大（谈论回应设计）

.parent {
  
  transform: translate(100px, 50px) scale(3); /* just to zoom in */
  
  
  position: relative;
  width: 36px;
  height: 36px;
  animation: grow 4s linear alternate infinite;
}

@keyframes grow {
  from {
    width: 36px;
  }
  to {
    width: 80px;
  }
}

.child1 {
  font-size: 36px;
  width: 100%; /* make this take paren'ts width */
  height: 36px;
  border-radius: 50%;
  position: relative;
  background: red;
}

.child2 {
  font-size: 10px;
  line-height: 20px;
  padding: 8px 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  right: 2px;
  text-align: center;
  color: #FFF;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2">FDDLEWERSDF</div>
</div>

删除FF和IE上文本溢出省略号的多余空格

2 个答案: