長い文章を省略するために、cssで文字数が一定の幅を超えたら三点リーダー（・・・）を表示させるようにした。
PCブラウザやandroidでは正しく表示されているのに、iPhoneでの表示がおかしい。なぜか三点リーダーが、変な位置に表示される。
解決方法を教えてほしい。
こんなことを考えている人はいませんか？
この記事を読むことで以下が分かります。
cssで文字数が一定の幅を超えたら三点リーダー（・・・）を表示させるようにしたときに、iPhoneでの三点リーダーを正しい位置で表示させる方法
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
先日こんなツイートをしました。
この記事ではこのツイートを掘り下げます。
テキスト省略時にiPhoneで三点リーダーの位置がおかしい【解決方法】
本来ならば以下のように表示させたかったのですが、
iPhoneではなぜか以下のように表示されました。
三点リーダーがなぜか文中に表示されています。本来ならば、文末に表示させたいのに。
ブラウザはSafariでもChromeでも同様の事象が起きました。
やっぱり実機確認は必須ですね。このあたりの異常はPCブラウザの検証モードでは分かりません。
絶対に同じ現象で悩んでいる人がいるはず、と検索をしたところ解決策を発見しました。
なお、テストデータの流し込みは、ワードプレス公式のテストデータ（日本語版）を使用しています。
aタグをspanで囲ったら解決した
aタグをspanで囲ったら解決しました。
参考にさせていただいたのは、以下の2つの記事です。
本当にありがとうございました。
今回の私の案件はWordPress（ワードプレス）案件でした。
記事一覧で投稿記事のタイトルを取得する部分で、投稿記事が長すぎる場合の対策を三点リーダーによる省略で行っていました。
もともとのコードは以下。
<?php
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
if ( 'post' === get_post_type() ) :
?>
修正後のコードは以下。
<?php
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark"><span>', '</span></a></h2>' );
if ( 'post' === get_post_type() ) :
?>aタグの中にspanタグを挟みました。そして、実機で確認すると・・・無事直っていました。
三点リーダーによるテキスト省略は案件でよく使う
コーディングをしてると「テキストが一定の幅を超えたら三点リーダー（…）で省略」という実装はよくあります。
特にWordPressなどのCMSが関わる案件で多くあります。記事一覧ページには本文の一部（2〜3行）だけ表示させて、クリックした先では記事全文が表示されるパターンです。
たとえば、1行だけ表示させたい場合のcssは以下。
p {
max-width: ●●●px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}「max-width」の部分には具体的な数字を入れてもいいですが、100%として親要素の幅いっぱいで省略することもできます。
なお、複数行に対応させたい場合は以下です。
p{
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}「-webkit-line-clamp」の数字を変えれば、他の行数にも対応できます。例では「3」です。5行で省略させたければ「-webkit-line-clamp: 5;」とすればOKです。
詳しくは以下を参照ください。
text-alignとの関係にも注意が必要
cssによるテキスト省略ですが、「text-align」の指定にも注意が必要です。
テキストが複数行のときに見た目を整えようとして「justify」に指定していると、思い通りの表示にならないことがあります。
今回参考にさせていただいたサイト
今回参考にさせていただいたのは、以下の2つの記事です。
本当にありがとうございました。
参考：CSSを勉強するのにおすすめな本
cssの学習はネットの情報だけでもできますが、第一線のプロの視点や設計思想を学ぶために一冊本を買っておくと便利です。
Kindleをはじめとした電子書籍でもいいのですが、こうした本は図や表が多いためスマホ・タブレットで見るには不向きです。実際の本で買うのがおすすめ。
「Web制作者のためのCSS設計の教科書」はおすすめ。保守しやすい、再利用しやすいcss設計のイロハをサイバーエージェントのフロントエンドエンジニアから学ぶことができます。
私も実際にこの本を持っています。
まとめ
この記事のポイントをまとめます。
・cssで文字数が一定の幅を超えたら三点リーダー（・・・）を表示させるようにしたときに、省略対象がaタグだとiPhoneで三点リーダーが予期せぬ位置に表示されることがある
・解決策はaタグをspanで囲ってあげること
今回の記事はここまで。
