# 【Bubble】親エレメントからはみ出したテキストを省略。矢印を押すと省略した部分が表示される実装

**URL:** <https://www.nocode-faq.com/t/topic/3823>\
**Category:** bubble\
**Created:** [2023 年 7 月 28 日午前 9:01 UTC](https://www.nocode-faq.com/t/topic/3823 "2023-07-28T09:01:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Taiyo](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/taiyo/32/4508_2.png) [@Taiyo](https://www.nocode-faq.com/u/Taiyo)\
**Post date:** [2023 年 7 月 28 日午前 9:01 UTC](https://www.nocode-faq.com/t/topic/3823/1 "2023-07-28T09:01:40Z")

</div>

親エレメントからはみ出したテキストを省略して矢印を押すと省略した部分が表示される実装をしたいと考えています。

**＜前提条件＞**

実装したい箇所としては

①下記画像の「メモ」で文字数が多すぎたら.text-hidenで文字を省略して、右上に三角形を表示

 ![text-hiden](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/0fd72005374a0ae746a0d292e8d4a776877cacc5.png)

②三角形を押すと省略されていた文字を表示する

という内容になります。文字数過多でないと三角形を表示しないことからテキストが親エレメントよりも大きかったら三角形を表示させるという実装をしたいと考えています。  
※三角形は毎回表示されるのではなく文字数が多いときに表示させたい。  
※.text-hidenの使用はほぼ必須。

**＜問題点＞**

Text-hidenで文字を省略すると親エレメントからテキストがはみ出すことがなく「三角形を表示させる」conditionalやワークフローの発火地点がなくなってしまいます。実際にjavascriptを書いて実装しましたがうまくいきませんでした。別の方法があればご教授いただきたいです。

 ![javascriptを書いて実装する](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8bc887f7b70bd0aec9114b9a0f7c0fdff6ecf848.png)

---

<div class="post-metadata">

**Author:** ![jansnap](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/jansnap/32/6599_2.png) [@jansnap](https://www.nocode-faq.com/u/jansnap)\
**Post date:** [2023 年 7 月 30 日午前 5:59 UTC](https://www.nocode-faq.com/t/topic/3823/2 "2023-07-30T05:59:46Z")

</div>

`:truncate to` で文字列を指定文字数以降カットするのはどうでしょうか？

> ※.text-hidenの使用はほぼ必須。

の理由によっては、誰か回答してくださるかもしれません😅