how to prevent the word breaking when i use css styles to div tag?

hi all I am new to use css styles,

when i use the below code the complete word is splitting into two words and is moving to next line , I am not 开发者_运维问答getting the complete text in a well paragraphed styles.

<div style="float:left; display:block;  word-wrap:break-word; width: 250px">                                                                   
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>  
</div> 

here i am binding the mail message to label at run time.

How to get the text wrap automatically when content applied to it without splitting the word.

can anyone suggest how to implement this?

thanks in advance

i think you need to remove word-wrap:break-word from your style. That is breaking your words. Edit to make your text wrap you can set the width of the paragraph or the containing div to a specific size

example:

width: 400px

UPDATE:

<div class="text">
    <asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>

CSS:

div.text {
   float:left; width: 250px; white-space: normal;
}

i am not sure how asp renders i am assuming it becomes a tag

div.text label {
   display:block; width: 100%;
}

Sounds like you want the white-space property, like:

.myTextClass {
    white-space: normal;
}

Update: And judging from the code you just posted, you also probably want to get rid of that word-wrap style.

CSS2 has a number of properties that define how a paragraph of text is laid out:

• white-space Specifies how white-space inside an element is handled
• word-spacing Increases or decreases the space between words in a text
• line-height Sets the line height
• text-align Specifies the horizontal alignment of text
• text-indent Specifies the indentation of the first line in a text-block

It's actually default behavior for text to wrap and be split on whole words. To ensure it does you can set white-space:nowrap, but I'm not sure you need to do that in your case.

The behavior you're describing is most likely caused by the word-wrap:break-word property you have in your code. The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line.

You have defined that long words can simply be broken in half when they don't fit. Removing this rule from the style attribute will give you back the default behavior. If not you can change the rule to word-wrap:normal to be sure.