First off, sorry for the absence. Things got a little busy in life as well as work. Not to mention having to get up to speed on 2.0 in a big hurry. All good things, but it left less time for fun stuff.

With that said, I want to offer a little tip to help with formatting your ASP.Net pages. Getting a label to be multiline within a set width. Now many of you know this trick, but I always have to re-remember the trick every time I need it, so this post can be a reference for you as well.

The trick is actually this - Don't use a label. Use a textbox instead. Since all the controls inherit from the same base class, the text box and the label are very similar anyway. But only the textbox has the multiline capability.

Once you have the textbox on your page the trick is to make it look like a label for the end user. To do this you need to set the following properties (This is the part I can never remember):

Wrap = true; (obviously)
rows = {some number greater than 0} (I use the rows property rather than the height property as it tends to be earier to get the formatting right)
ReadOnly = true (makes sense, right)
TextMode = multiline (or there no real reason to wrap the text...)
BorderStyle = None
BorderWidth = 0

Those last two are actually VERY important, and here is why. They get rid of that pesky border that you see around text boxes. That border is a common visual signal to the end user that says "ENTER INFO HERE!". If you leave the border up expect a lot of phone calls from folks saying "The web page is broken. It won't let me enter text."

So use this in good faith. More controls soon. Even my first 2.0 controls.
posted on Tuesday, March 21, 2006 6:04 AM | Filed Under [ Tips Tricks and Frustrating Errors ]

Comments

Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by gaurav aggarwal
on 4/15/2006 2:23 AM
Nice suggestion, but dont u think that a Disabled Textbos looks different from a label, in the sense that for eg. in my application, i need multiline labels with font VERDANA and wight BOLD. so for a disabled-textbox, i guess am unable to set these properties for the displayed text.
if u cangive any suggestions on this, thn my problm is solved !!

thnx,
Gaurav Aggarwal
gauravaggarwal.cs@gmail.com
TCS Kolkata
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Nick Chivers
on 5/8/2006 6:49 PM
So how do you get rid of the scroll bar, which spoils the whole effect?
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by agnieszka
on 7/13/2006 8:56 AM
You don't need to do anything to the label. Just concatinate your text like the following:

"some text" & "<BR>" & "text in the second line"....

<BR> puts the new line break.

Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Justin Wignall
on 7/16/2006 1:47 PM
How about just using the css white-space style...
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Arthur
on 9/27/2006 3:47 PM
when i using a form and i save all the content of the textbox with multiline in a database, then i want to see the same format text as the textbox without using a textbox, like php or asp 1 does.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Jazzwhistle
on 9/30/2006 6:53 PM
To remove the scrollbars you can add

style="overflow:hidden"

to the textbox.

Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Logan Scott
on 1/2/2007 2:12 PM
A better way to make a label multiline (IMNTBHO) is do this:

lblUserExists.Text = "That user does not exist" + "\n\" +
"Please contact Security at xxx-xxxx if you have questions."

This is actual code, and it works just dandy.

Logan
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Parag
on 1/5/2007 1:49 PM
My problem is that I am putting the data in the asp:label in the codebehind.. Concatenating <BR> <br/> vbcrlf etc is not working..
Can anyone help me with this.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Per
on 1/5/2007 10:15 PM
The issue is quite often relevant when you feed multiline data from a database. Mostly the data in the database will use character codes 13 followed by a code 10 for new line.

I uses the pre-render event of the label to change the newline characters to <br/> statements like this :

Protected Sub Label_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
Dim lbl As Label = sender
lbl.Text = Replace(lbl.Text, Chr(13) + Chr(10), "<br/>")
End Sub

//Per
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by shomun
on 1/23/2007 6:01 AM
How About using
"Some text " + Envronment.newLine + "Some text"
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Dan
on 1/31/2007 1:01 PM
Unless you are providing a "title+body" message like Logan Scott (and that can be managed by using 2 seperate labels), all these comments about inserting a newline at a hardcoded location in the string assume that ALL your users have the same screen resolution as you.

That's a very bad assumption, unless you're trying to propogate the "arrogant developer" stereotype. No offense intended, of course. :)
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Long
on 2/4/2007 7:59 PM
Hi guys

It took me quite some time to figure out how to wrap the text in your label. The point here is not to make the label to wrap the text but configure the text a little bit so that it can wrap by it self. Here is how.

This is the function to make the text wrappable:

public static string WrappableText(string source)
{
string nwln = Environment.NewLine;
return "<p>" +
source.Replace(nwln + nwln , "</p><p>")
.Replace(nwln, "<br />") + "</p>";
}

This is how to use it
OutputLabel.Text = WrappableText("[put your text here]");

The code is written in C#. Hope this will help someone out there.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Daryoush
on 2/6/2007 6:48 PM
It worked great! very smart way!
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by shruti
on 2/15/2007 11:56 PM
hi,
im storing data in the label dynamically,so cant use <br> tags.is thr ne other way to wrap multiline text in a label dynamically.
i tried using a textbox.but the scrollbar is visible.how to make the scroll bar hidden???
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by mARK
on 2/19/2007 10:49 AM
Hi Long

Your solution worked a treat! Here is the converted vb.net code:-

Public Shared Function WrappableText(ByVal source As String) As String
Dim nwln As String = Environment.NewLine
Return "<p>" + source.Replace(nwln + nwln, "</p><p>").Replace(nwln, "<br />") + "</p>"
End Function

'----------------------------------------------------------------
' Converted from C# to VB .NET using CSharpToVBConverter(1.2).
' Developed by: Kamal Patel (http://www.KamalPatel.net)
'----------------------------------------------------------------

I saved this in a page utilities class and called it using:

label.text = "whatever multline " & string_variable & vbCrLf & " of concatentated text inclusive of vbCrLf "

label.text = utilities.pageutilities.WrappableText(label.text)
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by JP
on 2/20/2007 3:36 PM
Strange that some people say the label method with <BR> / </br> etc works...

I have a master page and create a new page from it. If I then add a label and set the text to "line1</br>line2" the text is all written on the first line.

If I create a new page without basing it on the master page it works!

There seems to be some bug with this when using master pages..

Grrr....!

Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Mihailo
on 2/27/2007 7:01 AM
I'm just wandering why don't you use asp:Panel and set wrapping to true, and just put the label inside the panel? It will do the trick just fine.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Mark K
on 2/27/2007 2:12 PM
Instead of newline \n, I used <br> html tag to get multiline. This worked just fine -
lblWelcome.Text= "Welcome to <br> XYZ Global Organization's <br> Field Services Group" ;
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Apichart
on 3/5/2007 2:27 AM
To make textbox resizable with no scrollbar I did this

protected void Page_Load(object sender, EventArgs e)
{
string message = getText();//get your text data from database

int numText = message.Length;

this.txtContent.Rows = numText / 50; //set textbox rows

this.txtContent.Text = message;

this.txtContent.Attributes.Add("style", "overflow :hidden");//hide textbox scrollbar
}

It works fine!!

Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by test
on 3/9/2007 4:15 PM
can u plz translate that into vb,net... thx
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by dffhj
on 3/15/2007 5:55 PM
<a href="">Hello</a>
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by myherdem
on 3/16/2007 8:32 AM
Hey Long,
Thanks for the code.
I've used it for a databound datalist.
I added this code inside databound event of datalist to make the messageLabel multiline.

if (e.Item.ItemIndex != -1)
{
Label msgLabel = (Label)e.Item.FindControl("messageLabel");
msgLabel.Text = WrappableText(msgLabel.Text);
}

it works :)
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by James
on 3/25/2007 12:49 PM
Am I using this incorrectly or does it not handle a word that is longer than the width of the label for example if someone is entering some kind of spam message with no spaces?
Gravatar
# Thank you - It was a big help
Posted by Prashant
on 4/20/2007 1:33 PM
This suggestion was a big help.....broke my head trying to use label control as a multiline textbox control.....

thank you - who ever wrote this article ...
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by shb
on 4/24/2007 4:37 AM
this is good suggestion but i dont want it i want it into label only.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Aftab.
on 5/17/2007 6:21 AM
the code is awesome..it works great. I was trying to use \r\n to get a new line inserted in my text..that doesn't work for some reason.
but this method (WrappableText) is just cool. thanks to the author.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by JP
on 6/25/2007 7:18 PM
Easier solution that I've used in a formview and gridview control.

When in edit mode, you simply use a multi-line textbox. The line breaks are sent with the text to the database.

When you are in Read-Only mode, the text is taken from the database and pushed into a Label control. The Label control spits out HTML, which doesn't recognise the line breaks, leaving you with a jumbled mess.

So all you do is replace the line breaks (chr 13) with <br /> tags, like this:

<asp:Label ID="lblNotes" runat="server" Text='<%# Eval("Notes").ToString.Replace(chr(13), "<br />") %>' />

Works for me, hope it helps!
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by asaf
on 8/12/2007 3:19 AM
this worked for me:

<asp:Label ID="lblItemContent" runat="server" Text='<%# Eval("Content").ToString().Replace("\n", "<br />") %>' ></asp:Label>
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by greg
on 8/30/2007 4:29 PM
You guys missed it ---> Mihailo had your answer back on 2/27/2007 (read the posts!)

I'm just wandering why don't you use asp:Panel and set wrapping to true, and just put the label inside the panel? It will do the trick just fine.
2/27/2007 7:01 AM | Mihailo
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Sridhar
on 9/3/2007 12:03 AM
Hi,
this is a nice idea which is much simple, and the question is how to remove the vertical scroll bar.
When i execvute my application i can the see the scroll bar. This should not happen..
So please give me a suggestion...
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Paolo
on 9/6/2007 4:06 AM
Hello,
use this rule for the cssclass of the label:
white-space: normal;
It works for me.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Dina
on 9/21/2007 6:03 AM
Hi All, Any idea how to wrap text for below text?
<TD>
<asp:Label ID="comments" Runat="server" text='<%# DataBinder.Eval(Container, "DataItem") ("my_comments")%>'></asp:Label>&nbsp;</TD>
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Bob
on 10/23/2007 1:06 PM
<asp:Label Text='<%# Eval("Comment")==null ? Eval("Comment") : Eval("Comment").ToString().Replace("\n", "<br />") %>' runat="server" />
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Scott Marlowe
on 10/24/2007 8:00 AM
The <br> idea in the label field's Text property works great. Thanks.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Noran
on 10/26/2007 6:27 AM
This is really wonderful. Thanks. I had a problem with the scrollbars but "overflow: hidden" did the trick.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by mohamed antar
on 11/5/2007 11:57 AM
that work fine with me
protected void Label_News_Content_PreRender(object sender, EventArgs e)
{
Label Label_News_Content = (Label)sender;
string f = Label_News_Content.Text;
Label_News_Content.Text = Label_News_Content.Text.Replace("\n", "<BR>");

}
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by sid
on 11/21/2007 4:32 AM
Hey guys,

Problem with me is my label is having oneline text without space or anything.

I am getting email id from a stored procedure and then i need to display the email id in the panel which i have added.

lblEmail.text = "jane.smith@bankofamerica.com" is the string and my label width and panel width i am setting to 140px.....
now the problem is suppose the text length of email id is more than that....something like "srinivasan.ramakrishnan@bankofamerica.com" then i want to display it as

srinivasan.ramakrishn
an@bankofamerica.com

in the label and panel.....
but it is not warpping up instead that panel width is getting increased.

how to wrap up in this case...please help me....
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by ali raza
on 11/29/2007 5:12 AM
excellent code, Thanks a lot
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Anand
on 1/9/2008 1:18 AM
Cool man!! it works..Thanks a lot.
Gravatar
# How I hide the scroll bar from the text box ??
Posted by Tapas Mahata
on 1/11/2008 12:49 AM
I need the text box as a ,label...And so i need to hide the scroll bars from the control. SomeOne please help me ....
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Vlad
on 1/17/2008 2:07 PM
>>I need the text box as a ,label...And so i need to hide the scroll bars from the control. SomeOne please help me ....

I was already answered:
Style="overflow:hidden"
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Arindrajit
on 1/31/2008 3:29 AM
an anybody help me out ....how to make wrapping of text of a level(asp controls) in mozilla.......

i tried this"WrappableText" function...but its not workin....
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by steve
on 1/31/2008 10:38 AM
you can also set the textbox backcolor to be transparent
by setting the backcolor property to web/transparent
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by robin
on 1/31/2008 1:21 PM
great stuff
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Ben
on 2/2/2008 9:20 AM
Long, your solution is great! Thank You guys
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Randy
on 2/8/2008 7:41 AM
Noran - Thanks for the hide the scrollbar tip. Have been looking for that for a month.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Ed
on 2/13/2008 2:39 PM
Hey guys - Great Stuff Here on the label display / text box issues.

A couple of comments

1) Thanks for posting this to web - you really help the next guy down the line.

2) I've been messing around with labels for several years and I'm tired of babying them with a lot of text processing to offset the fact that they expand all over the place. I've been using text boxes instead of labels for a while now but only in areas where the scroll bars were OK. Thanks to this post I will be using them everywhere. In fact it will take a good reason for me to use a label in the futrue to display text.

3) Here are some additional tweaks you can make on managing text boxes that will save even more time and trouble. Some of them may have been mentioned above but I don't have the time to read through the many posts above....

1) Make several types of all purpose text box "labels" and save them on a page in your project you can copy them from. All of the tedious style setting will come along with them.

2)Take a few minutes to go through all of the style options by right clicking on the text box, if you do you will notice

TEXTBOXES - use the style options by right clicking a control and chosing "style" from the menu...

*can be centered left to righ and up and down -This is a great feature for asthetics. again - why use a label control for anything?

*will auto wrap on long unbroken string - which labels won't

*will auto truncate - in a really graceful way

*font sizes set in the in the style settings will not be overriden by a user changinng the font size in thier browser. - use "size - specific" 12pts etc.

*lots of other things - check them all out then make several workhorse labels of different sizes and styles on your stock page and paste it everywhere in your site, don't go back to the toolbox and start from scatch with an unknown - you will always know how it will react.

Finally I'll leave you with this cool little trick to make shaded fonts.

1) Create a panel control, turn the borders off, and set the backcolor to transparent - in other words make an invisible container.

2) Create a textbox with no border, transparent backcolor and whatever else it takes to hide it. Turn the scrolls off, auto center if you want (both done using the style menu). Past the text box IN the panel so that when you move the panel the text box moves with it.

3) Register the borders of the label to fill the interior of the panel - set the fore color property to WHITE.

4) Right click and copy the label - highlight the panel containing the first label and paste the clone into it.

5) Set the ForeColor property of the second label to the color of your choice - say black

6) Bump the Second label up and over so that it is registered directly on top of the first label - in other words the first label will disapear behind the one on top.

7) Use the arrow keys to bump the the top label left 1 and up one OR down one and right one.

8) In your code behind populate the labels as a pair like this

Dim OutputText as String
OutputText = "Hello"
OutputOneLbl.text = OutputText
OutputTwoLbl.text = OutputText

- to keep em in seek


9) When you're ready to use your 3-D label "object" be sure and copy the entire panel - this will keep the registration intact between the labels.


10) I've been putting all my controls in panel groups because when the panel is copied and pasted VisualStudio keeps them registered as oposed to Copy and pasting the controls themselves - wich VS mangles on the paste.


Live long and prosper...

ED








Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Ed
on 2/13/2008 2:45 PM
By the way - whay cant Microsoft put all of the properties in one place. As an interface designer I don't care that some are achieved by settting style properties and others are done some other way by the compiler - someone should make a third party add on that shows a property box with "auto center" etc along with the other properties.

Have you ever noticeds that if you set the height and width of a control you can do it in the property window - but if you want to set the top and left properties of the same control you have to go to the "style menu". I didn't even know that thing existed for a few monthsn - what's up with that.

Hey Microsoft - FIX THIS!!!
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Deke
on 2/15/2008 2:41 PM
You can also use a label and in css use overflow:auto; This will add a scroll bar to the label if needed. You could also use the same css with the textbox to hide the scroll bar when not needed.

here is my css for that I can apply to either a label or textbox and get the same effects:

.notes
{
margin-bottom:5px;
color: #000000;
width: 365px;
height: 60px;
padding: 5px;
background-color: #fff;
background-repeat: repeat;
display: block;
overflow:auto;
}

<asp:label id="LabelNotes"
cssclass="notes"
runat="server" />

<asp:textbox id="TextBoxNotes"
cssclass="notes"
runat="server"
readonly="true"
textmode="MultiLine"
borderstyle="None"
borderwidth="0" />
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Bri
on 2/20/2008 7:26 PM
I really like Bob's comment on 10/23/2007. I was wondering about something like that after seeing similar ideas in other languages (ruby on rails has a great helper for that). There should really be another conversion like ToString(), but ToHtml() instead. Ah well, there are always more things to wish for.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Galih
on 3/4/2008 10:34 PM
Thank'S For Solutions lbl.Text = Replace(lbl.Text, Chr(13) + Chr(10), "<br/>")
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by test
on 3/6/2008 4:38 PM
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server" ErrorMessage="Please add an answer." ControlToValidate="txtAnswer"></asp:RequiredFieldValidator>
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
on 3/18/2008 7:03 AM
Thank you so much for this answer.

# re: How to make your ASP.Net label multiline (how to wrap text in your label)
<asp:Label Text='<%# Eval("Comment")==null ? Eval("Comment") : Eval("Comment").ToString().Replace("\n", "<br />") %>' runat="server" /> 10/23/2007 1:06 PM | Bob
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Anonymous
on 3/19/2008 5:16 AM
If you have Rich Text or text containing HTML tags, the multiline textbox will not diplat the formatted HTML text but will display the text alongwith the corresponding tags.
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Ahmad Ali
on 4/28/2008 3:14 PM
Thanks you sooooooo mush all people help us, i am search 3 days about this problem , its working

<asp:Label Text='<%# DataBinder.Eval(Container.DataItem,"Subject")==null ? DataBinder.Eval(Container.DataItem,"Subject") : DataBinder.Eval(Container.DataItem,"Subject").ToString().Replace("\n", "<br />") %>' runat="server" ID="Label1" NAME="Label2"/>
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Anonymous
on 5/2/2008 3:51 PM
Wrap in div or asp:Panel with width for basic wrapping... Any other solution seems quite silly...

Use Replace("\n","<br/>") for when you need to display the breaks that are included in the text to be displayed...
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Valarmathi
on 5/14/2008 2:18 AM
How to wrap the long sentance in label while i am type without space
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by Luigi
on 6/14/2008 7:23 PM
Hey guys,

the most usability solution is that of "JP" (6/25/2007 7:18 PM):

always text in always form you use ......Replace(Chr(13), "<br />").

This is OK!!!

Bye
Gravatar
# re: How to make your ASP.Net label multiline (how to wrap text in your label)
Posted by anrao
on 9/6/2008 4:14 AM
EXCELLENT...thank u very much
Post Comment
Title *
Name *
Email
Url
Comment *