CSS 溢出文本可以居中吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6618648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can overflow text be centered?
提问by Nathan Ryan
When I specify text-align:centerfor 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:centerfor 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.
当我text-align:center为宽度小于文本宽度的元素指定时，文本与内容框的左边缘对齐并溢出内容框的右边缘。
You can see the two cases in action here.
您可以在此处查看两个案例。
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?
任何 CSS 魔法都可以使文本在内容框的左边缘和右边缘同样溢出，使其保持居中吗？
回答by Nemo64
I know this question is old, but I just had the same Problem and found a much easier solution with just a span. http://jsfiddle.net/7hy3w2jj/
我知道这个问题很老，但我遇到了同样的问题，并在一个跨度内找到了一个更简单的解决方案。 http://jsfiddle.net/7hy3w2jj/
<div>some text</div>
<div>
<span class="text-overflow-center">some text that will overflow</span>
</div>
Then you just need this definition
那么你只需要这个定义
.text-overflow-center {
margin-left: -100%;
margin-right: -100%;
text-align: center;
}
If you can work with pseudo elements, it can be done with no html at all. Just add these definition to your text container. http://jsfiddle.net/7287L9a8/
如果您可以使用伪元素，则根本不需要 html 就可以完成。只需将这些定义添加到您的文本容器中即可。http://jsfiddle.net/7287L9a8/
div:before {
content: "";
margin-left: -100%;
}
div:after {
content: "";
margin-right: -100%;
}
The only downside to the pseudo variant is that it only works with one line of text.
伪变体的唯一缺点是它只能处理一行文本。
回答by LarAng
This looks some old question.
这看起来有些老问题。
Now I think there is some good answer with flex.
现在我认为 flex 有一些很好的答案。
You can do this simply like this:
你可以像这样简单地做到这一点：
<div id="small_div">overflowing text</div>
#small_div {
display: flex;
justify-content: center;
}
That's it.
就是这样。
Hope much help to you!
希望对你有很大帮助！
回答by Nathan Ryan
Div magic to the rescue. In case anyone is interested, you can see the solution here.
Div 魔法来拯救。如果有人感兴趣，您可以在此处查看解决方案。
HTML:
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:
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;
}
回答by malko
this one seems to work: add a wrapper block with position relative and left:50% margin-left:-100% you can see it hereHere's the code:
这个似乎有效：添加一个带有位置相对和左的包装块：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>
回答by Edmond Chui
To make the solution work for multi-line text, you can modify Nathan's solution by changing the #inner left from 50% to 25%.
要使解决方案适用于多行文本，您可以通过将 #inner left 从 50% 更改为 25% 来修改 Nathan 的解决方案。
回答by feeela
Strange requirement. I would expand the boxes to the texts size.
奇怪的要求。我会将框扩展到文本大小。
One possible solution might involve a negative text-indent: text-indent: -50px;, but that won't work for smaller texts (first DIVin your example). No better idea here right now.
一种可能的解决方案可能涉及负 text-indent: text-indent: -50px;，但这不适用于较小的文本（首先DIV在您的示例中）。现在没有更好的主意。
回答by FraserK
Try
尝试
word-wrap:break-word;
instead of:
代替：
white-space:nowrap;
or do you only want it on one line?
或者你只想要一行？
回答by atwixtor
Give the innermost divsome margin: 0 -50%. If the elements are all display block or inline-block and text alignment is centered, this provides more shoulder room for the innermost element's text. At least, it works for me.
给最里面的div一些margin: 0 -50%。如果元素都是显示块或行内块，并且文本对齐居中，这将为最里面元素的文本提供更多的肩部空间。至少，它对我有用。
