# 新レスポンシブで、画面幅に合わせて長い文章を切り落とす方法 **URL:** \ **Category:** bubble\ **Created:** [2022 年 3 月 25 日午後 5:18 UTC](https://www.nocode-faq.com/t/topic/2735 "2022-03-25T17:18:41Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 3 月 25 日午後 5:18 UTC](https://www.nocode-faq.com/t/topic/2735/1 "2022-03-25T17:18:41Z")
・やりたいこと 新レスポンシブにおいて、おそらく旧レスポンシブにおけるcut off content if the element is not tall enoughをやりたいと考えています。 例えば、12345678910111213141516という文章が画面に入りきらなくなったときに、12345678…のように後ろを切り捨てたいです。 ・現状 bubble forumを見ると、max heightを設定すれば良いと書かれていたので、max heightをテキスト一行分の高さにして試してみました。 すると、bubble上のレスポンシブ画面では画面に入りきらない部分が上手く切り落とされていたのですが、プレビュー画面で実際に横幅を変えてみるとそのテキスト全体が消えてしまいました。 他のアプリで試してみても同じ現象が起きたため、他の要素の影響ではないと思われます。 ・質問したいこと 新レスポンシブで画面幅に合わせて長い文章の後ろの部分を切り落とす方法が知りたいです。 よろしくお願いいたしますm(\_\_)m ---
**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\ **Post date:** [2022 年 3 月 26 日午前 5:08 UTC](https://www.nocode-faq.com/t/topic/2735/2 "2022-03-26T05:08:09Z")
koyakeiさんの望む動きになるかわかりませんが、テキストに表示文字数制限をかけてみてはどうでしょうか。 参考リンク貼っておきます。 > **[テキストについて質問があります。](https://forum.bubble.io/t/topic/159518)** > > テキストで文字を表示するさい特定の文字数まで 入力されるとそれ以降｢…｣と表示させたい。 ---
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 3 月 26 日午前 6:09 UTC](https://www.nocode-faq.com/t/topic/2735/3 "2022-03-26T06:09:24Z")
ご回答ありがとうございます。 私も最初そう思いましたが、conditionがいくつか必要なのと、何文字にするかの計算が必要なのとでなかなか大変ですよね… 全角と半角で必要なスペースも変わりますし… 難しい…笑 ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2022 年 3 月 26 日午後 12:11 UTC](https://www.nocode-faq.com/t/topic/2735/4 "2022-03-26T12:11:43Z")
Cut off content if the element is not tall enoughは、日本語環境ではうまく動きません。 Contidionalの操作でも、おっしゃるように全角・半角でも幅が変わるので、レスポンシブに最適とは言えません。 ので、カットしたいエレメントに以下のCSSを適用させてください。 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; この時、高さを固定にするか、Fit width to contentにチェックを入れるなどして、親要素・子要素の関係性を見つつCSSが適用されるよううまく調整してみてください。 ---
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 3 月 26 日午後 2:42 UTC](https://www.nocode-faq.com/t/topic/2735/5 "2022-03-26T14:42:17Z")
本当にありがとうございます！ この問題に気づけてよかったです。 助かりました。 ---
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 3 月 28 日午前 10:47 UTC](https://www.nocode-faq.com/t/topic/2735/6 "2022-03-28T10:47:06Z")
@Aki_Sydney すみません。色々調べつつ頑張ってみたのですが、勉強不足でCSSを適用させることができず… 下のエディタではどこを修正すべきか教えていただきたいです。 どうかお願いしますm(\_\_)m > **[Bubble Editor - Responsivetest0328](https://bubble.io/page?name=index&id=responsivetest0328&tab=tabs-1)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2022 年 3 月 28 日午後 12:48 UTC](https://www.nocode-faq.com/t/topic/2735/7 "2022-03-28T12:48:06Z")
CSSはちゃんと当たっていますが、一部適用されていない物があるので、 以下のように!importantを付けて最優先事項にしてください。 あと、textエレメントにMinimum widthが付いているので、536pxより縮みません。 この状況では、Minimum widthは0でいいと思います。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/228d4677e2274457ec5ceb0d59be1c86571eb579.png) ---
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 3 月 28 日午後 5:59 UTC](https://www.nocode-faq.com/t/topic/2735/8 "2022-03-28T17:59:43Z")
本当に何度もありがとうございます！ 無事上手くいきました。 ---
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 4 月 2 日午前 10:09 UTC](https://www.nocode-faq.com/t/topic/2735/9 "2022-04-02T10:09:30Z")
@Aki_Sydney すみません再び質問失礼します。 二行目や三行目まで表示させて、それ以降は切り落とすといったことをしようとした場合にこのCSSでは一行目しか表示されず… 調べてみたところ下のようなCSSでうまくいきそうな気がしたのですが(!importantを一応つけてます)、ドットはついても指定した行数以上表示されてしまいました。 中途半端なheightだと文字が切れて表示されます。 すみません何処かおかしいところがあれば教えていただきたいですm(\_\_)m お願いします。 display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; エディタ > **[Bubble Editor - Testtesttest0402](https://bubble.io/page?name=index&id=testtesttest0402&tab=tabs-1)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2022 年 4 月 3 日午前 1:07 UTC](https://www.nocode-faq.com/t/topic/2735/10 "2022-04-03T01:07:41Z")
きちんと問題なく、3行目で…になっています。 4行目以降が表示されてしまうのは、エレメントのHeightが高すぎるからです。 しっかり3行分に必要な高さを計算して、それをFixed-heightあるいはMax-heightに設定すればOkです。 まず1行分に必要な高さですが、これはFont-size×Line-spacingで求めます。 今回の場合、Font-sizeが16px、Line-spacingが1.4なので、1行に必要な高さは22.4px。 ×3で、3行分に必要な高さは67.2px。 小数点は入力できないので、切り上げて68pxをHeightに設定しましょう。 今4行目がはみ出しているのは、Fixed-heightが80pxに設定されているため、 80px - 67.2px = 12.8px が余分に表示されてしまっています。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d6ed4dcb1011bf5cf6fcbfd90fc55d89469f6be9.png) ---
**Author:** ![koyama](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@koyama](https://www.nocode-faq.com/u/koyama)\ **Post date:** [2022 年 4 月 3 日午前 11:11 UTC](https://www.nocode-faq.com/t/topic/2735/11 "2022-04-03T11:11:59Z")
すごく丁寧に説明してくださり本当にありがとうございます！ とても助かりました！