中心文字大于容器？ （不使用单独的子元素） [英] Center Text Larger than Container? (Without using separate child element)

问题描述

使用CSS，很容易使用 text-align：center; 在容器中水平居中放置文本，但是如果该文本的任何单个单词大于容器的宽度，浏览器会自动爬升到容器的左侧边界（例如，过大的单词与尺寸过小的容器的左侧对齐，并且CSS word-break：hyphenate; 属性设置（或类似设置），超出尺寸的单词伸出容器的右边缘。

Using CSS, it's easy to horizontally center text in a container using text-align:center;, but if any single word of that text is larger than the width of the container, the browser automatically "clips" to the left boundary of the container (as in, the over-sized word aligns with the left side of the too-small container, and without the CSS word-break:hyphenate; property setting (or similar) the over-sized word sticks out past the right edge of the container.

有什么方法可以将这张照片的图片浮动到此处以节省垂直空间？不管怎样……

Any way to float this pic left of my text here to save vertical space? Oh well. Anyway...

如果没有使用子容器元素来保存文本，是否有办法居中太大的单词使它均匀地悬挂在容器的左侧和右侧？

Without using a child container element to hold the text, is there a way to center the over-sized word so that it hangs over both left and right sides of the container equally?

再次，我不想在文本框内使用文本容器康塔内在的我可以在5秒钟内使用固定宽度 < div>文本居中< / div> c>和负的左边距，或绝对在内放置容器元素的位置相对 div ，但是我正在寻找一个 CSS属性，即使该单词过长，该属性也会使文本居中以适合宽度。默认情况下， text-align：center 不执行此操作。

Again, I do not want to use a text container within the container. I could do this in 5 seconds by using a child <div>text to be centered</div> with fixed width and negative margin-left, or with absolute positioning of a container element inside a relative div, but I'm looking for a CSS attribute that will center text even when the word is too long to fit the width. By default, text-align:center doesn't do this.

有何想法？谢谢！ -Slink

Thoughts? Thanks! -Slink

推荐答案

此小提琴显示了三个 div 元素，分别说明了问题和以下两个解决方案。

This fiddle shows three div elements illustrating the "problem" and both the following "solutions".

我不确定您的需求，但是到目前为止，我发现的唯一真正的解决方案是设置显示：表格到您的文本容器。但这将允许容器拉伸到所需的宽度以包含最长的单词，这对您而言可能不是理想的。如果可以，那是最好的解决方案。

I'm not sure of your needs, but so far the only real solution I have found is to set display: table to your text container. But that will allow the container to stretch to the needed width to contain the longest word, which may not be desirable to you. If that is okay, that is the best solution.

如果必须至少保持 apparent 元素的大小，然后可以通过一些创造性的伪元素使用来伪造外观：

If you must keep the apparent size of the element at least, then you can fake the look by some creative pseudo-element use:

.fakeIt {
    text-align: center; /* what you wanted all along */
    display: table; /* key to get centered */
    position: relative; /* allow reference for absolute element */
    z-index: 2; /* set up for a background to be pushed below */
    width: 40px; /* what you want, but table resizes larger if needed*/
    border: none; /* transferring border to the "fake" */
    background-color: transparent; /* transferring background to the "fake" */
}

.fakeIt:after {
    content: ''; /* before or after need it, even if empty */
    width: 40px; /* the original width you wanted for the container */
    position: absolute; /* need this to position it */
    z-index: -1; /* push it behind the foreground */
    left: 50%; /* push it to center */
    top:0; /* give it height */
    bottom: 0;  /* give it height */
    margin-left: -20px; /* half the width to finish centering */
    border: 1px solid red; /* the border you wanted on the container */
    background-color: yellow; /* the background you wanted on the container */
}

但是，取决于您的在特定的应用程序中，伪造的解决方案可能无法正常工作。另外，原始元素仍将占据文档中更大的空间，只是看起来不像是。那可能会引起问题。容器上的负 margin 可以解决此问题，但您不知道需要设置的值，因为它随文本宽度的不同而不同。

However, depending upon your particular application, the "faked" solution may not work. Also, the original element will still take up the wider "space" in the document, it just won't look like it is. That could cause issues. Negative margin on the container could solve that, but you don't know what the value needs to be set at, as it would differ with text width.

您在评论中提到您不熟悉CSS中的伪元素，因此您可以想快速入门。

You mention in a comment you are not familiar with pseudo-elements in css, so you may want to have a quick intro.

这篇关于中心文字大于容器？ （不使用单独的子元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！