複数行テキストの文字数制限は調べれば方法はいくつか出てきます。
そうやって省略したテキストだけど、クリックで全文が表示できるようにしたいっていう要望もあるんじゃないかなと思います。
その方法について、テキストに文字数制限しつつの流れとして開設しているのがなかったので記事にすることにしました。
PHPやJavascriptは使用せず、CSSのみでやっていきます(‘ω’)
動作デモ
HTML
<div class="wrap">
<input type="checkbox" id="showtext">
<label for="showtext" class="description">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</label>
</div>CSS
.description{
cursor: pointer;
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#showtext{
display:none;
}
#showtext:checked ~ .description{
display:block;
}簡単な説明
cursor: pointer; マウスカーソルをポインターにしてクリックできることを知らせる。
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
で、はみ出た部分を … で省略するように。
-webkit-line-clamp: 3; の3で3行表示を指定。
あとは疑似要素:checkedを使って display: -webkit-box; とて display: block; を切り替えている感じです。
おまけ
display を使うと表示についてのアニメーションがうまくできなるんだよね(;´･ω･)
そこを力技で、それっぽく見えるようなアニメーションを作ってみました。
追加するCSSは次の通り。
.description,#showtext:checked ~ .description{
animation-name: close;
animation-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
#showtext:checked ~ .description{
animation-name: open;
}
@keyframes open {
0% {
background:#ddd;
}
40% {
background:#eee;
}
100% {
background:#fff;
padding:5px 0;
}
}
@keyframes close {
0% {
background:#ddd;
padding:5px 0;
}
40% {
background:#eee;
}
100% {
background:#fff;
padding:0;
}
}テキスト自体は0秒で表示してるけど、背景と僅かな padding でなんとか・・・。
フワっとしているように見えるかな！？
いつもお世話になっております。
CSSで複数行のテキストに文字数制限、更にクリックで全文表示する。 を参考に実装いたしました。
そこで質問なのですが、上記テキストが5つあった際に5つ目のテキストクリックしたら1つ目のテキストが展開します。
各々のテキストをクリックした際に、適したテキストを展開させるにはどのようにコーディングしたら良いですか？
語彙力が無く申し訳ありません。ご教授御願い致します。
さかすさん、こんにちは！
コメントありがとう☆
複数ある場合はid名やclass名を変えることで対応した個所のみ開閉するようになると思います。
例えば以下の様な感じです。
.description_1{
～ 略 ～
}
#showtext_1{
～ 略 ～
}
#showtext_1:checked ~ .description_1{
～ 略 ～
}
この例では「_1」というのを付け加えていますが、これを「_2」「_3」「_4」・・・とすればOKです！
ご返信ありがとうございます。
上記の内容を参考に訂正を行いましたが、クリックしても文章の展開が反応がありませんでした。
自分のCSSの記載が間違っているでしょうか？
ただ走るだけのトレーニングや筋力トレーニング、ランニングドリルではなく、身体の使い方を本質的に向上させていくことから始める特別なトレーニングメソッドを提供します。
身体能力を向上させていくことで、膝や足にかかる負担が少ない、効率的なランニングフォームを身に付けていくことができます。
.description2{
cursor: pointer;
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#showtext２{
display:none;
}
#showtext２:checked ~ .description2{
display:block;
}
.description2,#showtext２:checked ~ .description2{
animation-name: close;
animation-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
#showtext２:checked ~ .description2{
animation-name: open;
}
@keyframes open {
0% {
background:#ddd;
}
40% {
background:#eee;
}
100% {
background:#fff;
padding:5px 0;
}
}
@keyframes close {
0% {
background:#ddd;
padding:5px 0;
}
40% {
background:#eee;
}
100% {
background:#fff;
padding:0;
}
}
お手数おかけしますが、よろしく御願いします。
※HTMLはこちらになります。
ランニングでの膝や足の痛みは、しばらく休足したり、マッサージやストレッチをしたりしてもなかなか改善しません。
それは、本質的な痛みの原因が改善できていなからです。
N.C.Tでは、ランニングシューズの履き方からはじまり、練習メニューのアドバイス、フォーム改善やインソールの処方など、「シューズ」「プラン」「カラダ」の３つの視点から全面的なアプローチをすることで、あなたの「膝・足・腰・股関節」の痛みを根本から改善します。
ご連絡ありがとうございます！
WordPressの機能でコメントにhtmlタグが許可されていないため、タグが確認できませんorz
※使い辛いのでの後で何とかならないか調べてみます。
CSSを見た限りでは、細かいかも知れませんが「#showtext２」の「２」が大文字の２になっているようですので、小文字の「2」に修正をしてみてください。
あとはhtml中の各id名、各クラス名も書き換えればうまくいくかなと思います。
（例）
＜div class="wrap"＞＜input type="checkbox" id="showtext_1"＞
＜label for="showtext_1" class="description_1"＞テキスト＜/label＞
＜/div＞
※「＜」「＞」は正しくは半角です。
Yossybunnyさん、ありがとうございました！?
先程実装出来ました✨
昨日の夜遅くから今日の朝早くに対応いただきとても感激です?❗️
自分も早くYossybunnyさんのように周りにgiveできるよう頑張ります?