locked
Text Box Wrap Text RRS feed

  • Question

  • User-1314346660 posted

    Hi Experts,

    I have a textbox. The problem is that sometimes the amount of text is too long to be displayed properly. When the textbox renders it then spreads out of the box and messes up my page. Is there a html control i can use to stop this from happening?

    As ever, I am very grateful for any help!

    Billson3000

    Thursday, January 31, 2019 10:11 AM

Answers

  • User-943250815 posted

    Try set Multiline on Textbox, also set Columns and Rows, it will render as <textarea>

    <asp:TextBox ID="tbox" runat="server" TextMode="MultiLine" Columns="45" Rows="20"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 31, 2019 11:14 AM
  • User475983607 posted

    Can you give me an example????

    You really need set aside time to learn HTML and CSS basics.  It is also very helpful to learn the Browser's Developer tools because dev tools shows the styles applied to elements on the page as well as make updates in real-time.

    Anyway, an asp:label renders as a span (see Dev tools). A span is an inline element used to affect the style of an item within a line. 

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

    You need a block element the surrounds the text and restricts the width.   The div is a block element which will cause the text to wrap.  The span does not wrap by definition.

    <span style="width:5em; border:green solid thin;">
        Hello World!
    </span>
    
    <div style="width:5em;border:green solid thin;">
        Hello World!
    </div>

    A span within a div will also wrap text even if it is within a span.

    <div style="width:5em;border:green solid thin;">
        <span>Hello World!</span>
    </div>

    Keep in mind, there are CSS classes related to wrapping too.  

    https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

    Learn HTML

    https://www.w3schools.com/html/

    Learn CSS

    https://www.w3schools.com/css/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 31, 2019 5:21 PM
  • User-893317190 posted

    Hi Billson3000,

    If you want to limit your content in  asp label  in a specified size,  you could also use the overflow css attribute.

    It could hide the content beyond the area, or show scroll bar for the content beyond the area.

     <asp:Label ID="Label1" runat="server" Text="Label" Width="100px" Height="50px" style="overflow:auto"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</asp:Label>

    The result.

    Or use overflow:hidden, but you couldn't see the content beyond the area.

    For more information about overflow,please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 1, 2019 4:16 AM
  • User-1038772411 posted

    That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

    So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

    You can prevent newlines being entered via the input event and simply using a replace(/\n/g, ' ').

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 1, 2019 9:48 AM

All replies

  • User-943250815 posted

    Try set Multiline on Textbox, also set Columns and Rows, it will render as <textarea>

    <asp:TextBox ID="tbox" runat="server" TextMode="MultiLine" Columns="45" Rows="20"></asp:TextBox>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 31, 2019 11:14 AM
  • User-1314346660 posted

    Hi no that doesn't work for me. Its still spreading...

    I should have said!! This is a label not a TextBox. Arrrgh. Sorry!!!

    Thursday, January 31, 2019 12:02 PM
  • User-943250815 posted

    Label is rendered as <span>, your best choice is work with CSS, if necessary enclose it on <div> and set CSS on it

    Thursday, January 31, 2019 1:48 PM
  • User-1314346660 posted

    Hi JZero. Can you give me an example????

    Thursday, January 31, 2019 4:54 PM
  • User475983607 posted

    Can you give me an example????

    You really need set aside time to learn HTML and CSS basics.  It is also very helpful to learn the Browser's Developer tools because dev tools shows the styles applied to elements on the page as well as make updates in real-time.

    Anyway, an asp:label renders as a span (see Dev tools). A span is an inline element used to affect the style of an item within a line. 

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

    You need a block element the surrounds the text and restricts the width.   The div is a block element which will cause the text to wrap.  The span does not wrap by definition.

    <span style="width:5em; border:green solid thin;">
        Hello World!
    </span>
    
    <div style="width:5em;border:green solid thin;">
        Hello World!
    </div>

    A span within a div will also wrap text even if it is within a span.

    <div style="width:5em;border:green solid thin;">
        <span>Hello World!</span>
    </div>

    Keep in mind, there are CSS classes related to wrapping too.  

    https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

    Learn HTML

    https://www.w3schools.com/html/

    Learn CSS

    https://www.w3schools.com/css/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 31, 2019 5:21 PM
  • User-893317190 posted

    Hi Billson3000,

    If you want to limit your content in  asp label  in a specified size,  you could also use the overflow css attribute.

    It could hide the content beyond the area, or show scroll bar for the content beyond the area.

     <asp:Label ID="Label1" runat="server" Text="Label" Width="100px" Height="50px" style="overflow:auto"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</asp:Label>

    The result.

    Or use overflow:hidden, but you couldn't see the content beyond the area.

    For more information about overflow,please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 1, 2019 4:16 AM
  • User-1038772411 posted

    That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

    So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

    You can prevent newlines being entered via the input event and simply using a replace(/\n/g, ' ').

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 1, 2019 9:48 AM
  • User-1314346660 posted

    Thank you everyone for your help.

    I get it now!

    Friday, February 1, 2019 1:12 PM