Question

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

当线路断开时，它可能会起作用。但是什么是css属性？

问题是： 如何为用户显示：点，如果文本超过150px

<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

要使width有效，您还必须指定max-width（或white-space: nowrap），overflow: hidden和display: block

元素必须是一个块，因此请务必在内联元素上使用display: inline-block或div { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }。

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

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

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

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>

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

4 个答案: