「css 複数行 3点リーダー」とかでググると下記のようなやり方がガンガン出てくるし、実際それで問題なく3点リーダーが表示される。

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

しかし、今回3点リーダーが表示されないどころか、下記のようにdivの高さを指定しても高さが50px以上になっても文字が表示されていた。

div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
        overflow: hidden;
    height: 50px;
  }

色々調べた結果、既存のCSSでdivにpadding-bottomを指定していると、その分も高さがあると判定されていたらしい。

div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
        overflow: hidden;
    height: 50px;
  }
...
div {
    padding-bottom: 20px;
}

結構ググっても出てこなかったので、「CSS clamp 効かない」とかで見つかるようになると嬉しいと思った。

参考URL:
https://qiita.com/yoshida-hi/items/055c36e015f0bf8fe4f6

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.