# 画面幅に合わせて長い文章を切り落とす方法

**URL:** <https://www.nocode-faq.com/t/topic/3205>\
**Category:** bubble\
**Created:** [2022 年 10 月 2 日午後 8:40 UTC](https://www.nocode-faq.com/t/topic/3205 "2022-10-02T20:40:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![yasuda.yuu15](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yasuda.yuu15/32/4534_2.png) [@yasuda.yuu15](https://www.nocode-faq.com/u/yasuda.yuu15)\
**Post date:** [2022 年 10 月 2 日午後 8:40 UTC](https://www.nocode-faq.com/t/topic/3205/1 "2022-10-02T20:40:08Z")

</div>

### 実装したい機能

長い文章を画面幅に合わせてカットして、最後に…を追加したいのですが、うまくいかないため質問させていただきました。

お手数お掛けしますがご回答いただけると嬉しいです🙇‍♂️

### スクリーンショット

[こちらの質問](https://www.nocode-faq.com/t/topic/2735)のakiさんのご回答を参考にしてcssを設定しました。  
英語の文章の場合はうまくいくのですが、日本語の文章の場合、スペースか改行がないとうまく反応しない状況となっています。  
また、改行やスペースがある場合も画面幅いっぱいまで広がりません。

 ![スクリーンショット 2022-10-03 5.33.09](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/422481da4e8750eb823863efa6dc2d51fa6d6ad4.png)

### エディター

[https://bubble.io/page?name=index&id=yu-editorshare&tab=tabs-1](https://bubble.io/page?name=index&id=yu-editorshare&tab=tabs-1)

### 補足情報 （調べたURL/参考になりそうな事例）

禁則処理というもののデフォルト値が問題なのかなと思って[こちらのサイト](https://creive.me/archives/17653/#i-10)を参考にして修正してみたのですが、それもうまくいかず。。

---

<div class="post-metadata">

**Author:** ![yasuda.yuu15](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yasuda.yuu15/32/4534_2.png) [@yasuda.yuu15](https://www.nocode-faq.com/u/yasuda.yuu15)\
**Post date:** [2022 年 10 月 3 日午前 12:21 UTC](https://www.nocode-faq.com/t/topic/3205/2 "2022-10-03T00:21:06Z")

</div>

すみません、自己解決しました。。css書き間違えていました😭

参考までにcss貼っておきます。  
クラス設定したエレメントに高さ設定すれば反映されると思います。

```auto
<style>
.class{
display:-webkit-box !important;
 -webkit-box-orient: vertical !important;
 -webkit-line-clamp: 2!important;
overflow: hidden !important;
}
</style>

```

※2行表示となります

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2022 年 10 月 3 日午前 1:19 UTC](https://www.nocode-faq.com/t/topic/3205/3 "2022-10-03T01:19:43Z")

</div>

自己解決良かったです、自分で書いていて、解決することよくありますよね。