居中的内容，设置overflow-x:auto后，左边溢出元素的内容将无法通过滚动条显示，如何解决？

Question

1 问题描述：

如图所示：
电子邮箱本应该是[e-mail]，但是设置该元素为overflow-x:auto后，滚动条无法显示邮箱的全部内容。
设置overflow-x:visible后，显示的内容如下：

2 主要代码：

包裹文字的元素是div。html代码如下：

                            <div
                                :class="table.tableHead[7].headClass"
                                v-show="table.tableHead[7].show"
                            >{{ item.email }}</div>

css如下：

感觉就像是由于居中后，左右两边都会有文字溢出元素，然而左边的会被隐藏，只有右边的可以通过拖动scroll显示。想问一下大家有什么办法可以在保证内容居中的前提下，让所有的内容都可以通过拖动滚动条看到？

Answer 1

设置一下宽度就行了

Answer 2

已经根据这篇博文的方案解决：https://blog.csdn.net/CWH0908...

html代码如下，再使用一个div对文字内容进行包裹

<div
    :class="table.tableHead[7].headClass"
    v-show="table.tableHead[7].show"
>
    <div class="td-content">{{ item.email }}</div>
</div>

css样式设置如下：
含有td-content类选择器的div的父div的内容如下：

/* 表格溢出解决方案 */
.td-content {
    text-align: left;           /* 保证内容少时居中，内容多时左对齐 */
    display: inline-block;      /* 保证内容少时居中，内容多时左对齐 */
    overflow-x: auto;           /* 长度溢出时显示横向滚动条 */
    overflow-y: hidden;         /* 设置纵向滚动条不显示 */
    white-space: nowrap;        /* 设置内容不换行 */
    height: 55px;               /* 文本居中 */
    line-height: 55px;          /* 文本居中 */
}
.td-content::-webkit-scrollbar {
    height:8px;                 /* 设置滚动条高度 避免win下滚动条太高，遮挡住居中文字的下半身 */
}
.td-content::-webkit-scrollbar-thumb{
    background: #aaa;           /* 设置滚动条颜色 */
}