Help us understand the problem. What is going on with this article?

iOSブラウザにてカットオフした際の3点リーダーの場所が予期せぬ場所に現れる!

More than 1 year has passed since last update.

やりたかったこと

表示領域の関係で出したいテキストが長文だった際、カットオフすることが多いと思うが今回はスマホサイトのカットオフで2行もしくは3行でカットオフしたかったので、line-clampを使った。
ちなみにline-clampはwebkitにてサポートされているのでchromeとsafariで確認できる。PCはお仕事で採用できないが、スマホは十分だろう。
サーバー側で文字数を切らず、CSSで切るメリットは画面幅で文字数を変えたい時(幅がひろい端末にはより多く情報を見せたい時)にはCSSでないと無理だね!

参考
Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/#search=clamp

現象

PC
こちらがやりたかったこと
スクリーンショット 2017-10-27 11.02.26.png

スマホ(割りとiOSのどのバージョンでも確認)
IMG_C3D090CD8E97-1.jpeg
本来であれば末尾に3点リーダーが来てほしいものだが、何故か真ん中あたりに表示される。。。
これはもう泣きが入る((o(;△;)o))
下記はその際のコードである。

コード
html

html
<div class="box1">
<p><a href="#dummy" class="clamp2">123456789012345678901234567890123456789012345678901234567890</a></p></div>

style

css
.box1{
width: 120px;
height: 100px;
border: 1px solid red;
}
a{ word-break: break-all; }
.clamp2{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
max-height: 2.8em;
-webkit-line-clamp: 2;
}

対策

IMG_53B10E04C13C-1.png

コード
html

html
<div class="box1">
<p><a href="#dummy" class="clamp2"><span>123456789012345678901234567890123456789012345678901234567890</span></a></p></div>

aタグの中身をで囲むだけである。
styleの変更や追加は一切必要なかった(・ω・)/

原因

不明。。。。
知っている方いたら教えて欲しいです(ノД`)・゜・。

kaip04
Webデザイナー/デベロッパー をやっています。 HTML/CSS/JS/PHP/React 最近はTypescript に興味があります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした