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

问题描述

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

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 ; 仅在以下条件成立时有效：

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


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



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

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

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


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


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

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

希望有所帮助。

a href =http://jsfiddle.net/tmd8Z/ =noreferrer>这是一个jsfiddle 与您的代码，与显示：inline-block

• > https://developer.mozilla.org/en-US/ docs / Web / CSS /文字溢出


• https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

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; only works when the following are true:

• 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.

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:

• 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).

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.

Hope that helps.

Here's a jsfiddle with your code, with a display:inline-block added, to show how close you were.

Useful references:

• 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屋！