☰

2行目のCSS省略記号 質問する

tag-icon • tag-icon html css ellipsis
2行目のCSS省略記号 質問する

2 行目のCSS text-overflow: ellipsis、これは可能ですか? ネット上で見つけることができません。

例：

私が欲しいのはこんな感じです:

I hope someone could help me. I need 
an ellipsis on the second line of...

しかし、実際に起こっていることは次の通りです:

I hope someone could help me. I ...

ベストアンサー1

これはWebkitブラウザで動作するはずです:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

ブラウザのサポート

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

* { font-family: verdana; }
<div>
   The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display  property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
</div>

おすすめ記事