如何将div保留在一行并追加省略号 [英] How to keep div on one line and append ellipses

问题描述

在css中有一种方法可以确保div或class只是一行文本，如果它运行结束，请在其上添加省略号？我知道你可以将div / class设置为特定的高度，并且 overflow：hidden ，但是它看起来很奇怪我想要做的事。

在下图中，您看到右侧的div大于左侧的div。如果我可以用一个椭圆形来表示歌曲的名字，它们的高度都是一样的。任何人都知道如何做到这一点？附：我想要一个更好的方式，比在PHP中执行 $ song = substr（0，10，$ song）这样的东西...希望可以使用CSS。

解决方案

1. 设置容器的宽度。
   
2. 设置文本溢出：省略号。


3. 隐藏溢出*

演示： http://jsfiddle.net/jD99d/

  .my-class-name {
 white-space：nowrap; 
文本溢出：省略号; 
 width：100px; 
 overflow：hidden; 
} 
  

请参阅 https://developer.mozilla.org/en-US/docs/CSS/text-overflow

注意：这个CSS属性不会强制发生溢出;要这样做，并且要应用文本溢出，作者必须在元素上应用一些附加属性，例如将溢出设置为隐藏。

Is there a way in css to make sure that a div or class is only one line of text, and if it runs over, append ellipses on it? I know that you can set the div/class to a certain height and overflow:hidden, but it looks strange for what I'm trying to do.

In the picture below you see that the div on the right is larger than the one on the left. If I can make the name of the song one line with ellipses, they will both be the same height. Anyone know how to accomplish this? P.S. I want a better way than doing something like $song = substr(0, 10, $song) in php... something hopefully possible with CSS.

解决方案

1. Set a width on the container.
2. Set white-space: nowrap.
3. Set text-overflow: ellipsis.
4. Hide the overflow*

Demo: http://jsfiddle.net/jD99d/

.my-class-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
}

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

^{* Note that "This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden."}

这篇关于如何将div保留在一行并追加省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！