中心文本比容器大？ （不使用单独的子元素）

Question

使用CSS，使用text-align:center;可以轻松地在容器中水平居中文本，但如果该文本的任何单个单词大于容器的宽度，浏览器会自动“剪辑“到容器的左边界（例如，超大的单词与太小的容器的左侧对齐，没有CSS word-break:hyphenate;属性设置（或类似）超大的单词伸出容器的右边缘。

有什么方法可以将这张照片留在我的文字左边以节省垂直空间？那好吧。总之...

如果没有使用子容器元素来保存文本，有没有办法居中超大字，以便它挂在左右两侧容器一样吗？

同样，我不想在容器中使用文本容器。我可以在5秒内使用<div>text to be centered</div>具有固定width和否定margin-left的{​​{1}}，或absolute位于relative内的div容器元素text-align:center，但我正在寻找一个 CSS属性，即使单词太长而无法适应宽度，也会将文本居中。默认情况下，{{1}}不会执行此操作。

思考？谢谢！ -Slink

Answer 1

This fiddle显示了三个div元素，说明了“问题”以及以下“解决方案”。

一种可能的“解决方案”

我不确定您的需求，但到目前为止，我找到的唯一真正解决方案是将display: table设置为您的文本容器。但是这将允许容器伸展到所需的宽度以包含最长的单词，这可能是您不希望的。如果可以，那就是最佳解决方案。

另一种可能的“假”解决方案

如果你必须至少保留元素的明显大小，那么你可以通过一些创造性的伪元素使用伪造外观：

.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可以解决这个问题，但是你不知道需要设置什么值，因为它与文本宽度不同。

你在评论中提到你不熟悉css中的伪元素，所以你可以want to have a quick intro。

Answer 2

该死的水平滚动条！

http://jsfiddle.net/sqKU6/

<div class="inner">
    aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa 
</div>
​

CSS：

.inner {
    text-align: center;
    position: relative;
    left: +450%;
}
.inner:before {
    content: '';
    display: inline-block;
    margin-right: -900%;
}
​

Answer 3

我使用这个解决方案：

 VL1.Value = Mid(foundCell.Offset(0, 23).Value, 1, 1) & Mid(foundCell.Offset(0, 23).Value, 2, 1)
 VL2.Value = Mid(foundCell.Offset(0, 23).Value, 3, 1) & Mid(foundCell.Offset(0, 23).Value, 4, 1)
 VL3.Value = Mid(foundCell.Offset(0, 23).Value, 5, 1) & Mid(foundCell.Offset(0, 23).Value, 6, 1)