[CSS] div边框吃掉半个字体

1. swallow

<style>
    .swallow {
        position:relative;
        overflow: auto;
        border: 1px solid;
        height: 20px;
    }

    .swallow>span {
        position: absolute;
        top: 10px;
    }
</style>

<div class="swallow">
    <span>文字</span>
</div>

注：
（1）overflow:auto;会导致文字溢出部分被吃掉。
（2）即使overflow-x:auto;，在y方向上的溢出也是会被吃掉。

2. 如何防止溢出时被吃掉

<style>
    .container {
        position: relative;
    }
    
    .swallow {
        overflow: auto;
        border: 1px solid;
        height: 20px;
    }
    
    .swallow>span {
        position: absolute;
        top: 10px;
    }
</style>

<div class="container">
    <div class="swallow">
        <span>文字</span>
    </div>
</div>

注：
当.swallow需要滚动条时，必须设置overflow:auto;，
这时为了让溢出的文字不被吃掉，
可以让span相对于.swallow的父元素定位来解决问题。

常用场景是，弹出对话框带垂直滚动条，但是下拉框弹出层需要溢出对话框。