CODEWITHSUNDEEP
htmlcss
user755806
user755806

Reputation: 6815

Html wrap word to next line?

I have a div with below content.

hai hello ho
w are you wh
ere are you?

But I want the word to appear in next line instead of breaking as below.

hai hello 
how are you 
where are 
you?

What CSS style do I need to apply?

Thanks!

Upvotes: 0

Views: 89

Answers (3)

user4759415
user4759415

Reputation:

Put it in 

<p>

tags and if you want to make sure it won't break mid-word with CSS use the style of 

word-wrap:normal

on your paragraph, although the p tag alone should do it for you

Upvotes: 1

w3debugger
w3debugger

Reputation: 2102

  1. Using <br> , but this is not professional way

<p>
  hai hello
  <br>how are you
  <br>where are
  <br>you?
</p>

  1. Using max-width

p {
  max-width: 70px;
}
<p>
  hai hello how are you where are you?
</p>

rest of the methods are using jQuery/JavaScript, But I don't suggest you to include JS for this :)

Upvotes: 2

logicalcoder
logicalcoder

Reputation: 152

You can use the following ccs:

.wrap {
    word-wrap: break-word;
    width: 100px;
}

With the following html:

<div class="wrap"> 
    hai hello how are you where are you?
</div>

Upvotes: 3

Related Questions