text-overflow: 省略号将德语 Ö Ä Ü 上的双点去掉答案

【问题标题】：text-overflow: ellipsis cuts the double dots on German Ö Ä Ütext-overflow: 省略号将德语 Ö Ä Ü 上的双点去掉
【发布时间】：2015-06-03 08:54:15
【问题描述】：

我在我的 HTML 中使用 text-overflow: ellipsis 剪切了一个比我的容器 (div) 更长的文本，我还设置了 overflow: hidden 以查看点，如果文本比容器的宽度更长。

此功能运行良好，但如果行高低于点的高度，则德语“Ö、Ä、Ü”（已被引用，因为已在此字符上注意到）缺少顶部的点。

假设我不能增加行高。当我这样做时，它的工作。但是是否有机会在没有省略号的情况下仅对 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/

【问题讨论】：

元音变音被.box { overflow: hidden; } 截断。但是您需要像 mdn 中所写的那样设置属性：This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden.。所以你将不得不设置一个高度（坏主意）或者实际上只是改变line-height.
我认为您遗漏了一个寻找解决方案所必需的重要细节：为什么不能增加行高？
这是设计要求，听起来很愚蠢，但就是这样！我知道它很愚蠢！

标签： html css

【解决方案1】：

使用line-height:21px 类似于字体大小。

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

如果您删除 overflow，则省略号将不起作用。如果使用其他东西，即margin or padding，那么布局可能会中断。

或者您也可以减少font-size。这也将在不破坏布局的情况下解决您的问题

【讨论】：

【解决方案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>

【讨论】：

如果您想用完填充然后减小字体大小或增加行高可能是肯定的，但是如果您增加行高，那么您的输入框将会增长，而不是使用行高使用填充。
我知道，但如果他想要字体大小为 21，那么你必须增加 inline-height 或填充 @josef
@KevalBhatt 抱歉，删除了我的评论，但为时已晚 - 填充的问题是延伸到基线以下的字母仍然被切掉它也可能导致与行高增加导致的相同问题，但我想值得一试，因为上下文不是很清楚。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：