Css 为什么"；溢出“；属性会给出不同的结果吗？

第一个div（overflowhidden）中的标题与第二个div（nooverflow）中的标题不在同一垂直位置

JSFIDLE链接如下所示：

html是

<div class="line">
    <span class="attr">title :</span>
    <span id="overflowhidden" class="content"> this is long content</span>
</div>

<div class="line">
    <span class="attr">title :</span>
    <span id = "nooverflow" class="content"> this is long content</span>
</div>

---

您没有

溢出：隐藏在两者上。您在css中说过，只有id为
#overflowhidden
的代码应该与这一行
#overflowhidden{overflow:hidden；}

如果在
.content
类上设置，则两者的效果相同。你希望两个人都得到同样的结果，对吗


请在问题中包括你的代码。据我所知，它们看起来都一样吗@很抱歉，我对JSFIDLE不熟悉。链接是为div（nooverflow）更新的我有与UI设计相同的内容，后来我发现内容可能有两个长，所以我添加了溢出：隐藏以限制其宽度，但我发现标题的垂直位置意外移动，我真正想要的是如何添加溢出：隐藏而不移动标题的垂直位置？
.line {
    height: 30px;
    width: 200px;
    outline: 1px dashed;
}

.attr {
    position: relative;
    width: 30px;
}

.content {
    position: relative;
    display: inline-block;
    left: 40px;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;
    border: 1px solid greenyellow;
}

#overflowhidden {
    overflow: hidden;
}   

.content {
     position: relative;
     display: inline-block;
     left:40px;
     width:100px;
     height: 20px;
     line-height: 20px;
     text-overflow: ellipsis;
     white-space: nowrap;
     border-radius: 15px;
     border:1px solid greenyellow;
     overflow:hidden; /*you set it on the class for both to have*/
 }