54

このソリューションの前に見ましたが、正確にどこにあるか覚えていません... JSなし

回線が切れているときはうまくいくかもしれません。しかし、css プロパティとは何ですか?

質問: ユーザーに表示する方法:ドット、テキストが 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>

4

4 に答える 4

135

省略記号について話しているのですか？これを CSS に追加します

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

フィドル: http://jsfiddle.net/5UPRU/7/

于 2013-07-25T20:54:18.960 に答える
16

が機能するには、 (または)text-overflow: ellipsisも指定する必要があります。widthmax-widthwhite-space: nowrapoverflow: hidden

要素はブロックである必要があるため、インライン要素では必ずdisplay: blockorを使用してください。display: inline-block

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
于 2015-09-13T09:53:55.703 に答える
7

探しているもの- とに加えて で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/

于 2013-07-25T20:54:50.027 に答える