移动端网页，字的顶部被截掉了

Question

移动端页面开发时，在chrome上看字的展示是正常的，但是到手机上就有问题。

<div className="show-description" onClick={this.handleAvatarClick}>
    <pre className="show-detail">{description}</pre>
</div>

.show-description{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: 80%;
    font-size: 12px;
    line-height: 12px;
}

.show-description pre{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

显示效果（第二行是有问题的，是手机上的截图）

line-height那边是12px，之前的14px是我暂时用来修复的方法。overflow: hidden是有的，因为需要单行省略。麻烦各位大大解答一下~谢谢

Answer 1

是不是设置了overflow:hidden

有些字体显示会超出字体大小范围的，你又设置了overflow:hidden就被截取了，需要增加pre的高度，方法怎么方便怎么来

Answer 2

移动端用px么
加个height:14px试下

Answer 3

感觉你给的信息量不够，不一定是你给出的代码出的问题
移动端网页怎么做？