質問: ``` 1テキストテキスト 2長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキストテキスト 1テキストテキスト ``` ###### 問題点 長いテキストがあると、その文字数で全体の高さが決められてしまいます。 ###### やりたいこと ・文字数に関係なく行の高さは固定 ・隠れている部分はその行をクリックで表示 以上です。 何卒、よろしくお願いいたします。
回答: いろいろな方法があると思いますが、簡易的にCSSで表現する方法を紹介します。 ``` 1テキストテキスト 2長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキストテキスト 1テキストテキスト ``` **HTMLのポイント** * 固定した高さより高くなるであろうテキストを`~`で囲う。 * ↑で囲ったテキストに対応する``に`tabindex="-1"`の属性を指定する。 ``` td:nth-child(2) { width: 200px; } td { height: 2em; /* 固定したい高さ */ } .longtext { max-height: 2em; /* ここにも固定したい高さ */ overflow: hidden; } tr:focus .longtext { max-height: none; } ``` **CSSのポイント** * 固定したい高さを2箇所に記述する。`td{}`への指定はセルそのものの高さを、`tr:focus .longtext{}`への指定は長いテキストに対する高さの制御になる。 * `tr:focus .longtext {}`は、該当行をクリック(フォーカス)した時の`.longtext`への指定を示す。`max-height: none;`が指定されていることで、クリックしたときに長いテキストの高さの制限がなくなり、全体が表示される。 サンプル https://jsfiddle.net/x00fuov1/2/ 今回はCSSでのサンプルにしましたが、もしJavaScriptで作成するとしても基本的には同じような流れ(中身の要素の高さを制限→クリックしたときにその制限を解除)になると思います。 参考にしてください。