# Textarea field in modules

**URL:** <https://community.hubspot.com/t/textarea-field-in-modules/128522>\
**Category:** CMS Development\
**Created:** [March 24, 2025, 1:56pm UTC](https://community.hubspot.com/t/textarea-field-in-modules/128522 "2025-03-24T13:56:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SGonsalves5](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@SGonsalves5](https://community.hubspot.com/u/SGonsalves5)\
**Post date:** [March 24, 2025, 1:56pm UTC](https://community.hubspot.com/t/textarea-field-in-modules/128522/1 "2025-03-24T13:56:44Z")

</div>

I am building a Code Block Web Component following this blog [How to Build a Code Block Web Component](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)  
I cannot get the text box to wrap and display the whole text. It just shows the whole code in a single line. I am using prismjs to display the code as suggested.  
The field type is restricted to text, how do I get textarea? Would that help

 ![SGonsalves5_1-1742824587942.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/c/cc310caaca90b0df8bc522feddea5efbf827bf41.png)

 ![SGonsalves5_0-1742824488320.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/3/63d1db107c9ab3040aa935226c3977b81318efa5.png)

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [March 24, 2025, 9:19pm UTC](https://community.hubspot.com/t/textarea-field-in-modules/128522/2 "2025-03-24T21:19:50Z")

</div>

Hi, @SGonsalves5 👋 Thanks for your post. I haven’t tried this project myself, and I noticed it was published in 2022. Hey @Anton @DaveParry @Anonymous have you done the project that @SGonsalves5 linked to in their OP? Or do you have any general feedback or troubleshooting tips for them?

Thank you very much for taking a look! — Jaycee

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 25, 2025, 9:49am UTC](https://community.hubspot.com/t/textarea-field-in-modules/128522/3 "2025-03-25T09:49:46Z")

</div>

Hey @SGonsalves5,

most likely you’ll need to add some CSS to the code block like max-width, white-space etc.

Try this code instead of the one from the guide:

```lia-code-sample
 .code-block-container {
 margin: 2rem 0;
 border-radius: 4px;
 overflow: hidden;
 }

 .code-block-header {
 background: #1e1e1e;
 padding: 0.5rem 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }

 .code-block-title {
 color: #fff;
 margin: 0;
 font-size: 0.9rem;
 }

 .code-block-content {
 margin: 0;
 padding: 1rem;
 background: #1e1e1e;
 }

 .code-block-content pre {
 margin: 0;
 padding: 0;
 white-space: pre-wrap;
 word-wrap: break-word;
 }

 .code-block-content code {
 font-family: 'Fira Code', monospace;
 font-size: 0.9rem;
 display: block;
 white-space: pre;
 tab-size: 4;
 }

 /* Add line numbers if enabled */
 .code-block-content pre.line-numbers {
 position: relative;
 padding-left: 3.8em;
 counter-reset: linenumber;
 }

 .code-block-content pre.line-numbers > code {
 position: relative;
 white-space: inherit;
 }

 .code-block-content .line-numbers .line-numbers-rows {
 position: absolute;
 pointer-events: none;
 top: 0;
 font-size: 100%;
 left: -3.8em;
 width: 3em;
 letter-spacing: -1px;
 border-right: 1px solid #999;
 user-select: none;
 }

 .code-block-content .line-numbers-rows > span {
 pointer-events: none;
 display: block;
 counter-increment: linenumber;
 }

 .code-block-content .line-numbers-rows > span:before {
 content: counter(linenumber);
 color: #999;
 display: block;
 padding-right: 0.8em;
 text-align: right;
 }

```

And also enable the “allow\_new\_line” in the text block for the code

best,

Anton

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [March 25, 2025, 11:42am UTC](https://community.hubspot.com/t/textarea-field-in-modules/128522/4 "2025-03-25T11:42:39Z")

</div>

Hi @SGonsalves5

It sounds like you’re having trouble getting text to wrap properly in your code block web component. The issue is likely related to your CSS settings and how **Prism.js** applies styles. Here’s a simple breakdown of what’s happening and how to fix it:  
Why the Text Stays on One Line:  
**CSS White-Space Property:** By default, elements like **\<pre\>** and **\<code\>** often have **white-space: nowrap;** , which prevents text from wrapping and causes horizontal scrolling.  
**Prism.js Styles:** Prism.js, which handles syntax highlighting, might not automatically enable text wrapping, and its default or custom styles could be affecting this behavior.  
**Container Size:** If the container holding your code block is too narrow, long lines of code won’t fit and will remain on a single line.  
**How to Fix It:**  
**Update Your CSS:** Set **white-space: pre-wrap;** on the **\<pre\>** element in your component’s CSS. This allows text to wrap while keeping formatting intact. Adding **overflow-x: auto;** can also help with scrolling when needed.  
**Use a \<textarea\> for Input (If Possible):** If you’re dealing with user input, a **\<textarea\>** makes handling multi-line code easier and preserves line breaks naturally. Combined with **white-space: pre-wrap;** , this will ensure text wraps correctly.  
These changes should help your code block display text properly across multiple lines.

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!