CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hassan Sardar
Hassan Sardar

Reputation: 4523

Alignment of Text (TEXT having No Spaces) in DIV

If I enter Lengthy Text in Textarea with no spaces and I append it, It disturbs the Alignment of DIV and Text is shown in Single Line. How to Control this type of Text in DIV with Fixed Width?

Here is my DEMO :

http://jsfiddle.net/YRKxR/29/

Also Take a Look at this Image, Just trying to Explain my issue in better way.

enter image description here

I am providing the Code here too OR Visit my JsFiddle DEMO

Here is My HTML:

<table border="0" width="500" cellspacing="0">
   <tbody class="append_data"></tbody>

<tr>
  <td> 
      <textarea name="description" id="description"></textarea>
      <p>
          <a href="javascript:void(0);" class="add_more">Add More</a>
      </p>
  </td> 
</tr> 

</table>

Here is CSS:

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

Here is my JS CODE:

$('.add_more').click(function()
                     {
                        var description = $('#description').val();
                        $(".append_data").append('<div class="description_text">'+description+'</div><br><br>');
                     });

Upvotes: 1

Views: 118

Answers (4)

Viji
Viji

Reputation: 2629

Note : This code doesn't use CSS3 property

You can update the css property for the div with Overflow. like,

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
    overflow:auto;
    display:block;
}

Upvotes: 0

maverickosama92
maverickosama92

Reputation: 2725

use this:

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
    word-break:break-all; // this is the css property that would work
}

working fiddle here: http://jsfiddle.net/YRKxR/31/

Upvotes: 4

Anton
Anton

Reputation: 32581

Use css

word-wrap:break-word;

DEMO

Upvotes: 1

simonzack
simonzack

Reputation: 20928

You might be looking to wrap the text in the div:

css:

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

.append_data{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

http://jsfiddle.net/7jE9p/

Upvotes: 5

Related Questions