溢出文本可以居中吗？

Question

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

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

您可以在此处查看这两个案例.

任何CSS魔法都可以使文本同样溢出内容框的左边缘和右边缘,以便它保持居中吗？

Answer 1

我知道这个问题已经过时了,但我遇到了同样的问题,并且发现了一个更简单的解决方案. 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.只需将这些定义添加到文本容器中即可.http://jsfiddle.net/7287L9a8/

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

伪变体的唯一缺点是它只适用于一行文本.

Answer 2

Div魔法救援.如果有人有兴趣,你可以在这里看到解决方案.

HTML:

<div id="outer">
    <div id="inner">
        <div id="text">some text</div>
    </div>
</div>
<div id="outer">
    <div id="inner">
        <div id="text">some text that will overflow</div>
    </div>
</div>

CSS:

#outer {
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
}
#inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
}
#text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
}

Answer 3

这看起来有些老问题.

现在我认为flex有一些很好的答案.

你可以这样做:

<div id="small_div">overflowing text</div>

#small_div {
    display: flex;
    justify-content: center;
}

而已.

希望对你有很大帮助!