※記事の特性上一部デザインが崩れています。
コラムなどを投稿するタイプのWebデザインにおいて、投稿した文章が長すぎると想定していたデザインに合わない場合があります。その際は投稿した文章を途中で「…」に省略する方法で対応することができます。
また、日本語の場合はテキストがどれだけ長くても、指定したコンテンツ幅内で自動的に折り返されますが、半角スペースのない英語羅列や数字羅列の場合は横幅を超えると自動で折り返しが効かない場合があります。
今回は長い文章が投稿されても途中で「…」に省略する方法と、英語テキストや数字の折り返し指定についてご紹介します。
1. 長過ぎる文章を途中で「…」に省略する
1-1. 一行表示
1-2. 複数行表示
2. 英語テキストの折り返し指定
2-1. 単語ごとに折り返す
2-2. アルファベットごとに折り返す
2-3. 英語羅列や数字羅列を横幅に応じて折り返す
3. おわりに
1. 長過ぎる文章を途中で「…」にする方法
1-1. 一行表示
サンプル
月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないがなぜだかそれを捨てるに忍びず僕はそれを、袂に入れた。月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないが月に向ってそれは抛れず浪に向ってそれは抛れず僕はそれを、袂に入れた。月夜の晩に、拾ったボタンは指先に沁み、心に沁みた。月夜の晩に、拾ったボタンはどうしてそれが、捨てられようか？
⬇
省略後サンプル
月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないがなぜだかそれを捨てるに忍びず僕はそれを、袂に入れた。月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないが月に向ってそれは抛れず浪に向ってそれは抛れず僕はそれを、袂に入れた。月夜の晩に、拾ったボタンは指先に沁み、心に沁みた。月夜の晩に、拾ったボタンはどうしてそれが、捨てられようか？
コード
<p class="text-omit">月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないがなぜだかそれを捨てるに忍びず僕はそれを、袂に入れた。月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないが月に向ってそれは抛れず浪に向ってそれは抛れず僕はそれを、袂に入れた。月夜の晩に、拾ったボタンは指先に沁み、心に沁みた。月夜の晩に、拾ったボタンはどうしてそれが、捨てられようか？</p>1-2. 複数行表示
サンプル
月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないがなぜだかそれを捨てるに忍びず僕はそれを、袂に入れた。月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないが月に向ってそれは抛れず浪に向ってそれは抛れず僕はそれを、袂に入れた。月夜の晩に、拾ったボタンは指先に沁み、心に沁みた。月夜の晩に、拾ったボタンはどうしてそれが、捨てられようか？
⬇
省略後サンプル
月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないがなぜだかそれを捨てるに忍びず僕はそれを、袂に入れた。月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないが月に向ってそれは抛れず浪に向ってそれは抛れず僕はそれを、袂に入れた。月夜の晩に、拾ったボタンは指先に沁み、心に沁みた。月夜の晩に、拾ったボタンはどうしてそれが、捨てられようか？
コード
<p class="text-omit2">月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないがなぜだかそれを捨てるに忍びず僕はそれを、袂に入れた。月夜の晩に、ボタンが一つ波打際に、落ちていた。それを拾って、役立てようと僕は思ったわけでもないが月に向ってそれは抛れず浪に向ってそれは抛れず僕はそれを、袂に入れた。月夜の晩に、拾ったボタンは指先に沁み、心に沁みた。月夜の晩に、拾ったボタンはどうしてそれが、捨てられようか？</p>-webkit-line-clamp: 3;
の部分では行数の指定をしているので、必要な行数を指定することができます。
2. 英語テキストの折り返し指定
2-1. 単語ごとに折り返す
完成サンプル
I wander’d lonely as a cloud That floats on high over vales and hills,When all at once I saw a crowd,A host of golden daffodils,Beside the lake, beneath the trees Fluttering and dancing in the breeze.
コード
<p class="english">I wander'd lonely as a cloud That floats on high over vales and hills,When all at once I saw a crowd,A host of golden daffodils,Beside the lake, beneath the trees Fluttering and dancing in the breeze.</p>overflow-wrap:break-wordは、日本語の場合は幅に合わせて文字は折り返され、かつ、文字の途中で折り返されます。
英語の場合は単語ごとに折り返され、長い単語はその途中で折り返されます。
2-2. アルファベットごとに折り返す
完成サンプル
I wander’d lonely as a cloud That floats on high over vales and hills,When all at once I saw a crowd,A host of golden daffodils,Beside the lake, beneath the trees Fluttering and dancing in the breeze.
コード
<p class="english2">I wander'd lonely as a cloud That floats on high over vales and hills,When all at once I saw a crowd,A host of golden daffodils,Beside the lake, beneath the trees Fluttering and dancing in the breeze.</p>2-3. 英語羅列や数字羅列を横幅に応じて折り返す
サンプル
sample1234567890sample1234567890sample1234567890sample1234567890sample1234567890sample1234567890
⬇
折り返し設定後サンプル
sample1234567890sample1234567890sample1234567890sample1234567890sample1234567890sample1234567890
コード
<p class="english-number">sample1234567890sample1234567890sample1234567890sample1234567890sample1234567890sample1234567890</p>3. おわりに
今回は途中で「…」に省略する方法と英語テキストの折り返し方法をご紹介しました。コーディング段階でテキストの扱いに困り、対応方法を考える際に参考になれば幸いです。
