css - 在 css 上：如果文本行是中断显示点

Question

我在这个解决方案之前见过，但我不记得到底在哪里......没有JS

也许它在线路中断时起作用。但是什么是 CSS 属性？

问题是： 如何为用户显示：dots，如果文本长于 150px

演示

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

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

Answer 1

你说的是省略号吗？将此添加到您的 CSS

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

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

Answer 2

为了text-overflow: ellipsis工作，您还必须指定 a width（或 a max-width），white-space: nowrap并且overflow: hidden

该元素必须是一个块，因此请确保在行内元素上使用display: blockor 。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/

Answer 4

您可以text-overflow: ellipsis;在 css 文件中使用。例如：

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

.short-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

<div>apple</div>
<div>jack fruit</div>
<div class="short-text">super puper long title for fruit</div>
<div>watermelon</div>


<span class="short-text">should look like this...</span>