CSS 文本溢出:省略号；不工作? [英] CSS text-overflow: ellipsis; not working?

问题描述

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

.app a {高度:18px；宽度:140px；填充:0；溢出:隐藏；位置:相对；边距:0 5px 0 5px；文本对齐:居中；文字装饰:无；文本溢出:省略号；空白:nowrap；颜色:#000；}

<a href="">测试测试测试测试测试测试</a>

应该在第 4 次测试"前后切断

解决方案

text-overflow:ellipsis; 仅适用于以下情况:

• 元素的宽度必须以px(像素)为单位.%(百分比)中的宽度不起作用.
• 元素必须设置 overflow:hidden 和 white-space:nowrap.

您在这里遇到问题的原因是您的 a 元素的 width 没有受到限制.您确实有一个 width 设置，但是因为该元素设置为 display:inline(即默认值)，它会忽略它，并且没有其他任何东西限制其宽度.

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

• 将元素设置为 display:inline-block 或 display:block(可能是前者，但取决于您的布局需求).
• 将其中一个容器元素设置为 display:block 并为该元素指定一个固定的 width 或 max-width.
• 将元素设置为 float:left 或 float:right(可能是前者，但同样，就省略号而言，两者应该具有相同的效果).

我建议使用 display:inline-block，因为这将对您的布局产生最小的附带影响；就布局而言，它与当前使用的 display:inline 非常相似，但也可以随意尝试其他点；我试图提供尽可能多的信息来帮助您了解这些事物是如何相互作用的；了解 CSS 的很大一部分是了解各种样式如何协同工作.

这是包含您的代码的片段，添加了 display:inline-block，以显示您的距离有多近.

.app a {高度:18px；宽度:140px；填充:0；溢出:隐藏；位置:相对；显示:内联块；边距:0 5px 0 5px；文本对齐:居中；文字装饰:无；文本溢出:省略号；空白:nowrap；颜色:#000；}

<a href="">测试测试测试测试测试测试</a>

有用的参考:

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

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

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Should cut off around the 4th "Test"

解决方案

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 collateral 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 interact together; a large part of understanding CSS is about understanding how various styles work together.

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

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

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 文本溢出:省略号；不工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！