溢出文字可以居中吗？

当我指定text-align:center一个宽度大于文本宽度的元素时，文本将居中于元素的内容框中（如预期的那样）。

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

您可以在此处查看这两种情况。

任何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。只需将这些定义添加到您的文本容器即可。http://jsfiddle.net/7287L9a8/

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

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

这看起来有些老问题。

现在，我认为flex有一些不错的答案。

您可以像这样简单地进行操作：

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

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

而已。

希望对您有帮助！

魔术师来营救。如果有人感兴趣，您可以在此处查看解决方案。

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;
}

奇怪的要求。我将框扩展到文本大小。

一个可能的解决方案可能涉及一个负的text-indent：，text-indent: -50px;但是不适用于较小的文本（DIV在您的示例中是第一个）。现在没有更好的主意了。

尝试

word-wrap:break-word;

代替：

white-space:nowrap;

还是只想一行？

这似乎很有效：添加一个包装块，其位置相对且为left：50％margin-left：-100％，您可以在 此处看到以下代码：

<style>
div {
    display: block;
    position: relative;
    left: 100px;
    height:1.5em;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid black;
    background-color: silver;
}
span{
    display:block;
    position:relative;
    left:50%;
    margin-left:-100%;
}
</style>
<div><span>some text</span></div>
<div><span>some text that will overflow</span></div>

为了使解决方案适用于多行文本，您可以通过将左侧的#inner从50％更改为25％来修改Nathan的解决方案。

给内心div一些margin: 0 -50%。如果元素全部是显示块或内联块，并且文本居中对齐，则这为最里面的元素的文本提供了更多的肩膀空间。至少，它对我有用。