溢出的文字可以居中吗？

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

这看起来是个老问题了。

现在我认为 Flex 有一些很好的答案。

您可以简单地这样做：

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

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

就是这样。

希望对您有很大帮助！

Answer 3

Div 魔法来救援。如果有人感兴趣，您可以在here查看解决方案。

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 4

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

一个可能的解决方案可能涉及负文本缩进：

text-indent: -50px;

，但这不适用于较小的文本（示例中的第一个

DIV

）。现在没有更好的主意。

Answer 5

尝试

word-wrap:break-word;

而不是：

white-space:nowrap;

或者您只想将其写在一行上？

Answer 6

这个似乎有效： 添加一个相对位置和 left:50% margin-left:-100% 的包装块，你可以在here看到它 这是代码：

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

Answer 7

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

Answer 8

给最里面的

div

一些

margin: 0 -50%

。如果元素都是显示块或内联块并且文本对齐方式居中，则这将为最里面元素的文本提供更多的肩部空间。至少，它对我有用。

Answer 9

最好的方法就是转型。

.parent{
        position: relative;
}

.child{
        left: 50%;
        /* transform: translate(-50%, 0); */
        translate: -50% 0;
        position: absolute;
        white-space: nowrap;
}

left

是相对于父级的

translate

是相对于自我的

---

使用

margin:0 -100%;

接受的答案将溢出大于 100% 的文本....