スマホで見たときのwordpressの記事のタイトルの文字数を一定の横幅を超えたら省略したい

Question

■やりたいこと
スマホで見たときのwordpressの記事のタイトルの文字数を一定の横幅を超えたら省略したい

■問題点
ある横幅を超えたら...となるようにしたのだがデベロッパーツールでは正常に作動するのにスマホで見ると何故か文の途中が省略される

<div class="tp-magazine__article__card">
   <h3 class="tp-magazine__article__card__ttl">
     <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
     </a>
   </h3>
 </div>

.tp-magazine__article__card {
  position: relative;
  top: -20px;
  right: -10px;
  width: calc(100% + 10px);
  padding: 10px;
  padding-top: 10px;
  background-color: #fff;
}

.tp-magazine__article__card__ttl {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 1em;
  font-weight: normal;
}