# Expand truncated text for paragraph text fields to include rich text fields

**URL:** <https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486>\
**Category:** Feature Requests\
**Tags:** pf, tables, uiux-live-app, usability\
**Created:** [September 6, 2016, 6:41pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486 "2016-09-06T18:41:00Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![StevenBash72778](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@StevenBash72778](https://forums.knack.com/u/StevenBash72778)\
**Post date:** [September 6, 2016, 6:41pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/1 "2016-09-06T18:41:00Z")

</div>

- Properly truncate allthethings  
- Better expand/contract functionality  
- Give appropriate real estate in tables to text blobs; prevent tall, thin text columns  
- Prevent garbage white space  
---  
- Column collapsing  
- Better inline editing (no popover)  
- Live updating data

As a Builder, I would like to be able to display File/URL/Rich Text fields with a truncate option like is currently available on Paragraph Text fields.

Eg. copyoftestno41loopmonitoringofemergencystopsofthrustersandpropellersmaintdoc1943331a1.txt or [http://www.copyoftestno41loopmonitoringofemergency...](http://www.copyoftestno41loopmonitoringofemergencystopsofthrustersandpropellersmaintdoc1943331a1.com) does not allow for custom table widths to force wrap or truncate the URL for display. (Like is available for paragraph text.)

[https://knack.zendesk.com/agent/tickets/41866](https://knack.zendesk.com/agent/tickets/41866)

---

<div class="post-metadata">

**Author:** ![Craig\_Anderson](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/craig_anderson/32/1819_2.png) [@Craig\_Anderson](https://forums.knack.com/u/Craig_Anderson)\
**Post date:** [April 8, 2021, 8:12pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/2 "2021-04-08T20:12:15Z")

</div>

Great, thanks!

---

<div class="post-metadata">

**Author:** ![RobertHill](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/roberthill/32/986_2.png) [@RobertHill](https://forums.knack.com/u/RobertHill)\
**Post date:** [April 8, 2021, 3:37pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/3 "2021-04-08T15:37:31Z")

</div>

385571483152

I'm sorry, Craig. It has been awhile since I played in the world of CSS. I see you have limited your CSS to a specific view using CSS. You can also limit your CSS to a specific scene as well. For example:

```
#kn-scene_94 td.field_210.cell-edit > * {
overflow: auto;
overflow-wrap: break-word;
width: inherit;
max-height: 200px;
}
```

---

<div class="post-metadata">

**Author:** ![Craig\_Anderson](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/craig_anderson/32/1819_2.png) [@Craig\_Anderson](https://forums.knack.com/u/Craig_Anderson)\
**Post date:** [April 6, 2021, 7:48pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/4 "2021-04-06T19:48:36Z")

</div>

Thanks Robert.

---

<div class="post-metadata">

**Author:** ![RobertHill](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/roberthill/32/986_2.png) [@RobertHill](https://forums.knack.com/u/RobertHill)\
**Post date:** [April 6, 2021, 12:25pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/5 "2021-04-06T12:25:11Z")

</div>

385571483152

Nice! That would have been my suggestion. I don't think we can restrict CSS to a scene unless we use JavaScript to apply the CSS upon scene render, which is a little more complicated to explain. But we can definitely restrict it to a view like you have done using CSS only. In my experience, restricting the CSS to a view is much easier.

- EDIT:

I was wrong. You can limit to a specific scene by using the Element ID. For example: #kn-scene\_94

---

<div class="post-metadata">

**Author:** ![Craig\_Anderson](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/craig_anderson/32/1819_2.png) [@Craig\_Anderson](https://forums.knack.com/u/Craig_Anderson)\
**Post date:** [April 5, 2021, 8:53pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/6 "2021-04-05T20:53:13Z")

</div>

I sorted this by adding the view in the first line:

#view\_181 td.field\_17.cell-edit \> \* {&nbsp;

---

<div class="post-metadata">

**Author:** ![Craig\_Anderson](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/craig_anderson/32/1819_2.png) [@Craig\_Anderson](https://forums.knack.com/u/Craig_Anderson)\
**Post date:** [April 2, 2021, 8:47am UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/7 "2021-04-02T08:47:33Z")

</div>

Robert, is it possible to restrict this code only to apply to a certain scene?&nbsp;

I have the same field in several different tables, but only want one of them to have a limited row height.

---

<div class="post-metadata">

**Author:** ![Craig\_Anderson](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/craig_anderson/32/1819_2.png) [@Craig\_Anderson](https://forums.knack.com/u/Craig_Anderson)\
**Post date:** [April 1, 2021, 6:22am UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/8 "2021-04-01T06:22:09Z")

</div>

This is fantastic thanks Robert! Works great.

---

<div class="post-metadata">

**Author:** ![RobertHill](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/roberthill/32/986_2.png) [@RobertHill](https://forums.knack.com/u/RobertHill)\
**Post date:** [July 1, 2020, 3:22pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/9 "2020-07-01T15:22:36Z")

</div>

Until Knack gets on this, I created a custom solution to this problem in CSS that works for tables:

Note: _This does not truncate the text. Instead it creates a scroll-bar inside the RichText field's cell which prevents that cell from getting too large. All text is still visible if you scroll._

**CSS Code Tips:**

1. Replace the field\_id (in my example it is field\_210) with the field id of your RichText field.
2. Customize Max-Height to however large you want your row size to get. Mine is set pretty large intentionally. Feel free to shrink it down.
3. If you want to limit the width as well then set Max-Width to your desired size.

**Code:**

```
td.field_210.cell-edit > * {
overflow: auto;
overflow-wrap: break-word;
width: inherit;
max-height: 200px;
}
```

**Result:**

---

<div class="post-metadata">

**Author:** ![SeanYoung97556](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@SeanYoung97556](https://forums.knack.com/u/SeanYoung97556)\
**Post date:** [June 30, 2020, 7:16pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/10 "2020-06-30T19:16:05Z")

</div>

Just checking back here again. Providing a truncated view of RTF fields is a VERY important feature if Knack is to keep up to date with just about any other modern app out there. Please address ASAP.&nbsp;

---

<div class="post-metadata">

**Author:** ![RobertHill](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/roberthill/32/986_2.png) [@RobertHill](https://forums.knack.com/u/RobertHill)\
**Post date:** [June 1, 2020, 8:05pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/11 "2020-06-01T20:05:05Z")

</div>

It's been four years since this would "eventually" be added. Any updates?

---

<div class="post-metadata">

**Author:** ![SeanYoung97556](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@SeanYoung97556](https://forums.knack.com/u/SeanYoung97556)\
**Post date:** [November 28, 2019, 2:06am UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/12 "2019-11-28T02:06:22Z")

</div>

Please add this feature ASAP.&nbsp;

---

<div class="post-metadata">

**Author:** ![ThomasHull90972](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@ThomasHull90972](https://forums.knack.com/u/ThomasHull90972)\
**Post date:** [October 9, 2017, 8:11pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/13 "2017-10-09T20:11:16Z")

</div>

+100

---

<div class="post-metadata">

**Author:** ![JoshCamero69088](https://avatars.discourse-cdn.com/v4/letter/j/6a8cbe/32.png) [@JoshCamero69088](https://forums.knack.com/u/JoshCamero69088)\
**Post date:** [January 25, 2017, 10:36pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/14 "2017-01-25T22:36:49Z")

</div>

What are the steps to truncated the text?

---

<div class="post-metadata">

**Author:** ![Guilhermeb42087](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@Guilhermeb42087](https://forums.knack.com/u/Guilhermeb42087)\
**Post date:** [October 25, 2016, 6:22pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/15 "2016-10-25T18:22:53Z")

</div>

+1

---

<div class="post-metadata">

**Author:** ![JamesDeOli64352](https://avatars.discourse-cdn.com/v4/letter/j/eada6e/32.png) [@JamesDeOli64352](https://forums.knack.com/u/JamesDeOli64352)\
**Post date:** [September 13, 2016, 1:30pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/16 "2016-09-13T13:30:32Z")

</div>

I absolutely need this. I used Rich Text in many places for the same reason.

---

<div class="post-metadata">

**Author:** ![SeanYoung97556](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@SeanYoung97556](https://forums.knack.com/u/SeanYoung97556)\
**Post date:** [December 1, 2023, 7:04pm UTC](https://forums.knack.com/t/expand-truncated-text-for-paragraph-text-fields-to-include-rich-text-fields/9486/17 "2023-12-01T19:04:54Z")

</div>

Other options with this feature request would of course be a variable for number of chars to trigger truncation, and perhaps a message / link to display if truncation occurs.
