我有一些非常简单的标记,我希望用“...”截断长文本
.topRow div {
display: inline-block;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
fiddle :http://jsfiddle.net/xyPrv/3/
问题是,当我将 overflow: hidden
添加到 div 时,它会使文本向上跳跃几个像素,并且与周围的其余文本不对齐。
是什么导致了这种垂直运动?如果不手动将文本向下推(使用 position: relative; 和 top: 5px
),我怎样才能干净利落地对齐文本?
最佳答案
试试这个:
.topRow div {
display: inline-block;
vertical-align:middle;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
关于html - 隐藏的 CSS 溢出导致文本对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19362474/