Css 溢出的文本可以居中吗

发布于01月30日

当我为宽度大于文本宽度的元素指定text-align:center时，文本在元素的内容框中居中(如预期).

当我为宽度小于文本宽度的元素指定text-align:center时，文本将与内容框的左边缘对齐，并溢出内容框的右边缘.

您可以在操作here中看到这两个 case .

任何CSS魔术都可以使文本在内容框的左边缘和右边缘均匀溢出，从而使其保持居中吗？

推荐答案

我知道这个问题很古老，但是我刚刚遇到了同样的问题，并且找到了一个简单得多的解决方案，只需要一个跨度. http://jsfiddle.net/7hy3w2jj/个

<div>some text</div>
<div>
    <span class="text-overflow-center">some text that will overflow</span>
</div>

那么你只需要这个定义

.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}

如果您可以使用伪元素，那么完全不需要html就可以完成.

div:before {
    content: "";
    margin-left: -100%;
}
div:after {
    content: "";
    margin-right: -100%;
}

伪变量的唯一缺点是它只能处理一行文本.

实用课程推荐