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

使用CSS，使用

text align:center可以轻松地将容器中的文本水平居中，但如果该文本的任何单个单词大于容器的宽度，浏览器会自动“剪辑”到容器的左侧边界（如中所示，过大的单词与过小容器的左侧对齐，并且没有CSS
分词：连字符；
属性设置（或类似设置）过大的单词从容器的右边缘突出

有没有办法让这张图片在我的文字左边浮动以节省垂直空间？哦，好吧，不管怎样

如果不使用子容器元素来保存文本，是否有方法将大小过大的单词置于中心，使其均匀地挂在容器的左右两侧

同样，我不想在容器中使用文本容器。我可以在5秒钟内使用一个子
文本居中
，使用固定
宽度
和负
左边距
，或者使用
绝对
将容器元素定位在
相对
div
中，但我正在寻找或者一个CSS属性，即使单词太长而不适合宽度，它也会将文本居中。默认情况下，
text align:center
不会这样做

想法？谢谢！-偷偷溜走那该死的水平滚动条


显示三个
div
元素，说明“问题”和以下两个“解决方案”

一种可能的“解决办法”
我不确定您的需要，但到目前为止，我找到的唯一真正的解决方案是将
display:table
设置到您的文本容器中。但这将允许容器拉伸到所需的宽度，以包含最长的单词，这对您来说可能并不理想。如果可以，这是最好的解决方案

另一种可能的“伪造”解决方案
如果必须至少保持元素的外观大小，则可以通过一些创造性的伪元素使用来伪造外观：

.fakeIt{
文本对齐：居中；/*您一直想要的内容*/
显示：表格；/*键以居中显示*/
位置：相对；/*允许参考绝对元素*/
z-index:2；/*设置用于将背景推送到下方*/
宽度：40px；/*您想要的，但如果需要，表的大小会更大*/
边框：无；/*将边框转移到“假”*/
背景色：透明；/*将背景转换为“假”*/
}
法基特：之后{
内容：“”；/*在需要之前或之后，即使为空*/
宽度：40px；/*容器的原始宽度*/
位置：绝对；/*需要这个来定位它*/
z索引：-1；/*将其推到前台后面*/
左：50%；/*将其推到中间*/
顶部：0；/*指定其高度*/
底部：0；/*指定其高度*/
左边距：-20px；/*完成对中所需宽度的一半*/
边框：1px纯红；/*容器上所需的边框*/
背景色：黄色；/*容器上所需的背景*/
}

但是，根据您的具体应用，“伪造”解决方案可能不起作用。而且，原始元素仍将占据更大的“空间”在文档中，它只是看起来不像。这可能会导致问题。容器上的负
边距
可以解决这个问题，但您不知道需要设置什么值，因为它会随着文本宽度的不同而不同

您在评论中提到您不熟悉css中的伪元素，因此您可以。
我使用此解决方案：

.limited-string {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}

什么？你把我弄丢了。我从来没有意识到
：在
CSS属性之前（这很酷）。我只想要一个CSS文本属性或其他技巧！
左边距
或类似的东西都不好。？？谢谢。这似乎是一个非常优雅的解决方案。我喜欢这个概念，但它适用于锚定标记吗？
@Slink——两件事：1）如果它被“视为一个内嵌元素”，那么您就不应该得到任何重叠，因为内嵌元素会随着文本而扩展。您必须将其
显示设置更改为其他设置。2） 即使是内联的，
a
标记也可以有一个子元素
span
，并将两者的css设置为文本的中心位置。因此，你不必像你想象的那样限制自己不使用孩子（同样，HTML5标准允许
a
中的
div
，但是，早期的标准不允许这样做……因此你的
DOCTYPE
将决定你在这方面有什么自由）。这是一个极好的观点。如果我使用HTML5的
doctype
，那么我可以使用子
div
？我不知道这是否适用于所有浏览器，甚至interweb exploder。我之所以不使用子元素，是因为我认为我不能使用块显示元素。
标签允许CSS属性，如
高度：100px和
宽度：100px即使不指定CSS
显示
属性另一个让我担心的原因是包含块类型的显示元素使链接复杂化，我确实希望网站对网络爬虫友好。我不符合谷歌的要求，但我不确定这将如何影响谷歌网站的合法性评级bots@Slink--即使使用较旧的web标准，在
a
标记中放置
span
并将其设置为
display:block
也没有问题。不允许的不是css
display
设置，而是html的原生
block
元素。谷歌不会在意
span
标签中是否有
span
，它一直都在做。
.inner {
    text-align: center;
    position: relative;
    left: +450%;
}
.inner:before {
    content: '';
    display: inline-block;
    margin-right: -900%;
}
​

.limited-string {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}