在CSS上:如果文本行是break显示点

Question

我之前看过这个解决方案,但我不记得究竟在哪里...没有JS

也许这就是线路休息时的工作.但是什么是css属性？

问题是: 如何为用户显示:点,如果文本长于150px

DEMO

<div>apple</div>
<div>jack fruit</div>
<div>super puper long title for fruit</div>
<div>watermelon</div>

div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
}

Answer 1

你在谈论省略号吗？将其添加到您的CSS中

text-overflow: ellipsis;
white-space: nowrap;

小提琴:http://jsfiddle.net/5UPRU/7/

Answer 2

为了text-overflow: ellipsis工作,你还必须指定一个width(或一个max-width),white-space: nowrap和overflow: hidden

元素必须是块,因此请确保使用display: block或display: inline-block内联元素.

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 3

你正在寻找text-overflow: ellipsis;- <div>除了white-space: nowrap;和之外你需要在它上面指定它overflow: hidden;

div {
    font-family: Arial;
    background: #99DA5E;
    margin: 5px 0;
    padding: 1%;
    width: 150px;
    overflow: hidden;
    height: 17px;
    color: #252525;
    text-overflow: ellipsis;
    white-space: nowrap;
}

http://jsfiddle.net/5UPRU/4/