可以将溢出文本居中吗？ [英] Can overflow text be centered?

问题描述

当为宽度大于文本宽度的元素指定 text-align：center 时，文本的中心位于元素（如预期）。

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

当为宽度为的元素指定 text-align：center 小于文本的宽度，则文本与内容框的左边缘对齐并且溢出内容框的右边缘。

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魔法使文本

推荐答案

Div魔法到内容框的左边缘和右边缘，拯救。如果有人感兴趣，您可以此处查看解决方案。

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