メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • アンカータグの文字列を一行に短縮、末尾を三点リーダーにするcss設定

アンカータグの文字列を一行に短縮、末尾を三点リーダーにするcss設定

やりたいこと:複数行のアンカータグの文字列を一行に短縮、末尾を三点リーダーにする

  • 複数行の文字列を一行にしたいです
  • 複数行から一行にするcss設定は比較的に簡単できそうです(いろいろな記事があります)。以下はcssの text-overflow: ellipse を利用する要点
    • white-space: nowrap;  //改行しない
    • text-overflow: ellipsis; //末尾に三点リーダー
    • overflow:hidden;          //表示範囲外の部分を隠す

問題点:上記css構文は複数行の文字列ではうまく行きますが、アンカータグでは末尾に三点リーダーがうまく表示されません

  • 理由:アンカータグのdisplayプロパティはinlineを継承しているため、末尾に三点リーダーがうまく表示できませんでした。
  • アンカータグのdisplayプロパティを「block」、「inline-block」に指定すればよいです。
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    overflow: hidden;
  • 但し、アンカータグをラップするエレメント(例:div)のdisplayプロパティは「block」/「inline-block」であれば、このエレメントに最初のcss構文はうまく行きます


 

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads