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

css
block
customization

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

  • 複数行の文字列を一行にしたいです
  • 複数行から一行にする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構文はうまく行きます