CSSで-webkit-line-clampがきかなくて困った

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

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

しかし、今回３点リーダーが表示されないどころか、下記のように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