html怎么防止左边溢出,【CSS】居中的内容，设置overflow-x:auto后，左边溢出元素的内容将无法通过滚动条显示，如何解决？...

1 问题描述：

如图所示：

电子邮箱本应该是abcdefghijklmnopqrstuvwxyzabcdefg@123.com，但是设置该元素为overflow-x:auto后，滚动条无法显示邮箱的全部内容。

设置overflow-x:visible后，显示的内容如下：

2 主要代码：

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

css如下：

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

回答：

设置一下宽度就行了

回答：

html代码如下，再使用一个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; /* 设置滚动条颜色 */

}