Question

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

jsfiddle链接如下：

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是：

.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;
}

Answer 1

你们两个都没有overflow: hidden;。您在自己的css中说过，只有ID为#overflowhidden的人才应该使用此行#overflowhidden {overflow: hidden;}

如果你在.content类上设置它，两者的工作方式相同。你想要两个相同的结果吗？

DEMO

.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*/
 }

为什么＆＃34;溢出＆＃34;财产给出不同的结果？

1 个答案: