溢出的文本可以居中吗？

Posted 2023-03-05

【中文标题】溢出的文本可以居中吗？

【英文标题】：Can overflow text be centered?

【发布时间】：2011-09-30 21:51:53

【问题描述】：

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

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

你可以看到这两个案例here。

任何 CSS 魔法都可以使文本在内容框的左边缘和右边缘均等溢出，从而使其保持居中吗？

【问题讨论】：

您需要white-space: nowrap; 吗？如果不是，则文本居中显示。

@feeela：我使用white-space:nowrap 来将文本保持在一行，这是理想的行为。

【参考方案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%;

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

【讨论】：

哦，感谢上帝的负边距！我使用 -99px 而不是 % value 的子元素比具有可变尺寸的父元素小得多，无论如何overflow: hidden

@Aziz 可能。但我喜欢只定义我使用的属性。

对于 MSEdge，如果您使用 can use flexbox — 那么将 display: flex; justify-content: center; 放在 div 上会更好地跨浏览器。 jsfiddle.net/jfroom/2u5x1hmj/1@Nemo64 考虑更新？

这根本行不通，是吗？尝试将 div 设为 15px 宽而不是 100px，这样就不会再居中了。

@Gaurav 我认为没有所有行均等溢出就无法实现这一点，例如：jsfiddle.net/ew52qj7b/1 您可以查看连字符，但浏览器支持对于自动来说不是那么好连字符：caniuse.com/#feat=css-hyphens 但根据情况你可以使用 ­允许在特定位置使用连字符。

【参考方案2】：

这看起来是个老问题。

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

你可以这样做：

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

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

就是这样。

希望对您有所帮助！

【讨论】：

请注意。这在 IE11 和更早版本中不起作用（即使使用自动前缀）。

这应该是公认的答案，因为它允许多行溢出居中

这是一个很好的起点，但我还必须添加 text-align: center; 才能使多行居中并溢出

【参考方案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;

【讨论】：

“Div 魔法救援。”好吧，DIV-soup 也有救了……但一个棘手的解决方案

@feeela：同意 div 会变得一团糟，这就是为什么我将它们排除在 HTML 之外，并在页面加载时使用 javascript 构建更复杂的 DOM。

这可能是一个选项：jsfiddle.net/PdER5。我故意不将其发布为答案，因为它需要经过大量测试以确保在您需要支持的任何浏览器的实际页面上使用它时它不会做任何奇怪的事情。

@thirtydot：如果文本的宽度是“随机数”的两倍以上，则中断，但在实践中它可以做得足够大，不会成为问题

@thirtydot 恕我直言，这是一个更酷的解决方案，但负边距不是“某个随机数”，而是左侧定位距离加上 DIVs 宽度的一半。

【参考方案4】：

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

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

【讨论】：

text-indent 的想法很好。它可以替换我的解决方案中的margin-left，结果相同。

【参考方案5】：

试试

word-wrap:break-word;

代替：

white-space:nowrap;

还是你只想要一行？

【讨论】：

这是一个奇怪的要求。为什么需要它溢出元素？

元素实际上是一个形状，文本是一个标签。我正在尝试用最少的 JavaScript 制作某些类型的图表。

为什么不尝试将背景设置为图像，然后将图像设置为不重复并居中。例如jsfiddle.net/C4BBS/1 你可以看到边框显示了 div 的实际宽度但 bg 居中

边框之类的东西仍然很乱，需要一些额外的代码来处理元素上的用户事件。

可能发生哪些事件？不需要边框，但我把它们留在那里，这样你就可以看到元素的实际宽度。

【参考方案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>

【讨论】：

文本长度不走运，它使您的解决方案看起来起作用，直到您像我在这里所做的那样添加更多文本：jsfiddle.net/LSpCS/2

不错，嵌套元素少了一层。

@thirtydot: 真可惜，希望。我想知道是否有办法让它发挥作用。

【参考方案7】：

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

【参考方案8】：

给最里面的div一些margin: 0 -50%。如果元素都是 display block 或 inline-block 并且文本对齐居中，这将为最里面的元素文本提供更多的肩部空间。至少，它对我有用。