Question

我在我的HTML中剪切了一个比我的容器（div）更长的文本，文本溢出：省略号，根据我也设置溢出：隐藏，如果文本比容器的宽度更长，则看点。

这个功能完美无缺，但是，如果线高低于点的高度，德国'Ö，Ä，Ü'（参考，因为它已被注意到这个字符）在顶部缺少点。

假设我不能增加行高。当我这样做，它的工作。但是，只有x轴才能有没有省略号的相同行为吗？

    .box {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .font {
      font-family: UniversNextMedium;
      color: #3c3c3c;
      text-shadow: 0px 1px 0px #FFFFFF;
      font-size: 21px;
      line-height: 15px;
    }

    
    <div class="box font">
        hellowÖrldtheonlyworldwehave
    </div>

这是一个小提琴：

http://jsfiddle.net/an256zu1/

Answer 1

使用类似于font-size的line-height:21px。

演示：http://jsfiddle.net/lotusgodkk/an256zu1/1/

如果删除overflow，则省略号将无效。如果使用其他内容，即margin or padding，则布局可能会中断。

或者您也可以减少font-size。这也将解决您的问题，而不会破坏布局

Answer 2

使用 padding-top：3px; 可行。

.box {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top:3px;
    border:1px solid
}

.font {
  font-family: UniversNextMedium;
  color: #3c3c3c;
  text-shadow: 0px 1px 0px #FFFFFF;
  font-size: 21px;
  line-height: 15px;
}

<div class="box font">
    hellowÖrldtheonlyworldwehave
</div>

Answer 3

您可以使用边距和填充的组合来解决问题并保留布局中的文本位置。例如：

    .box {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .font {
      font-family: UniversNextMedium;
      color: #3c3c3c;
      text-shadow: 0px 1px 0px #FFFFFF;
      font-size: 21px;
      line-height: 15px;
      margin-top:-5px;
      padding-top:5px;
    }

    
    <div class="box font">
        hellowÖrldtheonlyworldwehave
    </div>

Answer 4

此处的问题是line-height: 15px;和overflow: hidden;的组合。我建议设置正确的行高，1.4，例如：

来自article: line-height：

定义行高的推荐方法是使用数字值，称为“无单位”行高。

.box {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font {
  font-family: UniversNextMedium;
  color: #3c3c3c;
  text-shadow: 0px 1px 0px #FFFFFF;
  font-size: 21px;
  line-height: 1.4;
}

<div class="box font">
    hellowÖrldtheonlyworldwehave
</div>

文本溢出：省略号切断德国ÖÄÜ的双点

4 个答案: