起源#
今回共有したいテーマは多行テキストの「展開と折りたたみ」です。このニーズは普段はありふれたものですが、実現するには多くのテクニックが必要です。これから著者と一緒にじっくり考えていきましょう〜
図 1-1 展開と折りたたみのテキストの示意図
解決策#
浮動#
このボタンの位置を見ると、これは単純なレイアウトでは達成できない効果であり、位置決めでも達成できないことがわかります。浮動を使用しなければ、このような図文混合の効果は得られません。
ボタンが表示されない場合はこちらをクリックして、サイトでこの例を開いてください。
今、テキストとボタンがうまく混ざり合い、図文混排の構造が形成されました。次にやるべきことは、ボタンをテキストの省略記号の後ろに移動させることです。これはどう実現するのでしょうか？実は、ボタンの隣に浮動要素があり、clear: right;またはclear: both;を使用してボタンの右側の浮動をクリアし、ボタンを下に移動させます。この浮動要素はどうやって作るのでしょうか？実は、同様に簡単に要素を作成し、その要素を右側に浮動させるだけです。
表示に問題がある場合はこちらをクリックして、サイトでこの例を開いてください。
上記では、div を使って浮動要素を作成しましたが、実際にはdiv.mainのbefore要素を直接使用して高さを作成する方が簡単です。これにより、余分な要素を追加して可読性を損なう必要がありません。
上記の例には実際にもう一つの問題があります。それは、before/div.lineの高さがここでハードコーディングされていることです。実際のアプリケーションでは柔軟にコーディングするべきです。最初に見たときに思いつく解決策は、height: 88px;をheight: 100%;に変更することですが、アイデアは良いですが、実際に試してみると、height: 100%;は効果がなく、依然として高さがありません。疑問🤨、この高さが無効になる問題がよくわかりません。
2023-07-06 補足:
height: 100%;の無効問題については、私のこの記事を参照してくださいheight: 100%; 無効問題探求
効果はすでに初歩的に達成されており、残りは展開と折りたたみの 2 つの状態スタイルの処理を簡単に行うだけです。最も簡単で特別なテクニックを必要としない方法は、直接Jsを使って処理し、クリックに応じてdiv.mainに多行省略スタイルを追加 / 削除することです。ここでは別の処理方法を試み、Jsを使用せずにHtmlとCssだけで同じ効果を達成します。私たちはlabelタグを知っています。このタグは<input type="checkbox">と組み合わせることで状態を制御する効果を得ることができます。つまり、選択 / 解除が可能です。また、inputは選択状態の擬似クラスも提供しているので、さらに便利です。最後の疑問は、ボタンのテキストをどう変更するかです。皆さんはcontentという css プロパティを理解していますか？このプロパティは要素に内容を追加することができ、これによりHtmlとCssだけでJsができる効果を完全に達成できます。
例に問題がある場合はこちらをクリックして、サイトでこの例を開いてください。
フォントスタイル#
別の考え方として、このボタンは作らずに、省略記号…のフォントスタイルを任意のスタイルに変更します。これはフォントスタイルに関わるもので、私たちはiconfontを使用して自分で定義したフォントスタイルを直接使用します。
同時に、展開に対応する文字を省略記号…に変更する必要があります。Unicode 値は2026、文字は…です。
...と混同しないように注意してください。そうでないと、1 つの.が 1 つの展開アイコンに対応することになります。これは悲しい話です。以下の画像は誤った例です。
現在、展開ボタンには形状ができましたが、機能はありません。なぜなら、現在の方法では展開と折りたたみを単独で実現することができないからです。実際に状態を制御する方法を追加する必要がありますが、この方法は基本的に上記のlabelと<input type="checkbox">と同じです。唯一の違いは、labelに手動で幅と高さを設定して省略記号の位置、つまりコンテナの右下に配置する必要があることです。
Js による模擬コンテナ#
このアイデアは、vantのテキスト省略コンポーネントを見て、好奇心に駆られてgithubでソースコードを見て、目から鱗が落ちました。なんて素晴らしい操作なんでしょう👖🌶️！
ここで言う模擬コンテナは、折りたたみテキストコンテナと同じコンテナをクローンし、そのコンテナをビューポートの外に移動させ、文字数を減らし続けて、予定の折りたたみテキストの高さと現在のコンテナの高さを検出し続けることで、適切な文字数を見つけ、最後に省略記号とボタンを追加することで目標を達成します。
結論#
この問題を何度か見たことがあり、毎回浮動の解決策でこの問題を解決してきましたが、今回初めて他の解決策を真剣に考えることができました。これは私が考えたものではありませんが、他の人の優れたアイデアを学ぶことも成長の一つの方法です。
参考資料:
https://juejin.cn/post/6963904955262435336
https://juejin.cn/post/7214839315855491130
https://github.com/youzan/vant/blob/main/packages/vant/src/text-ellipsis/TextEllipsis.tsx