BinaryDevelop
  1. ホーム
  2. html

[解決済み】hidden overflowでspanにドット("...")を表示する方法は？

2022-04-15 13:24:13

質問

私のCSS 

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

現在、以下のように表示されています。 コンテンツ内容

しかし、私は以下のように表示したい。 コンテンツコンテンツ ...

コンテンツの後にドットを表示したいのですが。コンテンツはデータベースから動的に取得されます。

どのように解決するのですか？

このためには text-overflow: ellipsis; プロパティを使用します。以下のように記述します。 

span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

JSFiddle

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します