可以溢出文本为中心？ [英] Can overflow text be centered?

问题描述

在我指定文本对齐：中心与宽度大于文本的宽度元素，文本的内容框内居中元素（如预期）。

When I specify text-align:center for an element with a width that is greater than the width of the text, the text is centered within the content box of the element (as expected).

在我指定文本对齐：中心与宽度小于文本的宽度的元素，文本对齐的左​​边缘内容箱和溢出内容框的右边缘。

When I specify text-align:center for an element with a width that is less than the width of the text, the text is aligned to the left edge of the content box and overflows the right edge of the content box.

您可以看到这两种情况在行动这里。

You can see the two cases in action here.

任何的CSS魔可以使文本同等溢流二者的左边缘和内容框的右边缘，使得它保持居中？

Can any CSS magic make the text equally overflow both the left edge and the right edge of the content box, so that it stays centered?

推荐答案

股利魔术救援。如果有人有兴趣，你可以看到该解决方案这里。

Div magic to the rescue. In case anyone is interested, you can see the solution 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;
}

这篇关于可以溢出文本为中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！