CSS text-overflow：ellipsis;不工作？ [英] CSS text-overflow: ellipsis; not working?

问题描述

我不知道为什么这个简单的CSS不工作...

I don't know why this simple CSS isn't working...

CSS：

.app a {
    height: 18px;
    width: 140px;
    padding: 0;
    overflow: hidden;

    position: relative;
    margin: 0 5px 0 5px;

    font: bold 15px/18px Arial;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFF;
}

HTML：

<div class="app">
    <img src=""></img>
    <h1></h1>
    <a href=""></a>
</div>

推荐答案

text-overflow：ellipsis ; 仅在以下条件成立时有效：

text-overflow:ellipsis; only works when the following are true:

• 元素的宽度必须限制在 px （像素）。 ％（百分比）将不起作用。


• 元素必须具有 overflow： code>和 white-space：nowrap 设置。



• The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
• The element must have overflow:hidden and white-space:nowrap set.

原因你在这里有问题是因为 width 你的 a 元素不受约束。你有一个 width 设置，但是因为元素被设置为 display：inline （即默认）

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

您可以通过执行以下操作之一来解决此问题：

You can fix this by doing one of the following:

• 将元素设置为 display：inline-block 或 display：block


• 将其中一个容器元素设置为 display：block ，然后给出该元素固定的宽度或 max-width 。


• 将元素设置为 float：left 或 float：right （可能是前者，但同样，省略号。）

• Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
• Set one of its container elements to display:block and give that element a fixed width or max-width.
• Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

我建议 display：inline-block ，因为这将对您的布局具有最小的外部影响;它工作非常像 display：inline ，它使用目前就布局，但是也可以自由地试验其他点;我试图尽可能多的信息，以帮助你了解这些东西如何干扰在一起;

I'd suggest display:inline-block, since this will have the minimum colateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interract together; a large part of understanding CSS is about understanding how various styles work together.

希望有所帮助。

有用的参考资料：

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow


• https：//开发人员。 mozilla.org/zh-CN/docs/Web/CSS/white-space

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

这篇关于CSS text-overflow：ellipsis;不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！