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的父元素定位來解決問題。

常用場景是，彈出對話框帶垂直滾動條，但是下拉框彈出層需要溢出對話框。