10

使用 CSS，很容易将容器中的文本水平居中text-align:center;，但如果该文本的任何单个单词大于容器的宽度，浏览器会自动“剪切”到容器的左边界（如- 大小的单词与太小的容器的左侧对齐，并且在没有 CSSword-break:hyphenate;属性设置（或类似设置）的情况下，过大的单词会伸出容器的右边缘。

在此处输入图像描述有什么方法可以将这张图片漂浮在我的文字左侧以节省垂直空间？那好吧。反正...

在不使用子容器元素来保存文本的情况下，有没有办法将过大的单词居中，使其均匀地挂在容器的左侧和右侧？

同样，我不想在容器中使用文本容器。我可以在 5 秒内通过使用<div>text to be centered</div>带有 fixedwidth和negative的子元素margin-left，或者absolute将容器元素定位在 a 中来做到这一点relative div，但我正在寻找一个CSS 属性，即使单词太长而无法适应宽度，它也会使文本居中. 默认情况下，text-align:center不这样做。

想法？谢谢！-Slink

4

3 回答 3

12

这个小提琴显示了三个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 中的伪元素，因此您可能想要快速介绍一下。

于 2012-07-14T03:23:34.413 回答
3

那个该死的水平滚动条！

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%;
}
​
于 2012-07-11T18:04:44.817 回答
0

我使用这个解决方案：

.limited-string {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}
于 2017-12-07T12:22:17.230 回答