CODEWITHSUNDEEP
htmlcsstextwidth
João Rodrigo Castro
João Rodrigo Castro

Reputation: 11

How can I limit the text to a div's width?

I am trying to limit text to a div's width and can not get it to work.

Where it says TESTE3 I want the text not to go over the edge of the red div. Can anyone help me please? Image sample

Upvotes: 0

Views: 7661

Answers (2)

Govind jha
Govind jha

Reputation: 400

Use this CSS:

word-break: break-all;

Upvotes: 1

Frits
Frits

Reputation: 7614

I would suggest that you give us example code using either the built in code editor, or jsfiddle.

There are two ways however to solve your problem.

You can either go for overflow:hidden; as shown here: https://jsfiddle.net/L62w981g/

Or you can have the text flow over to the next line using word-break or white-space as shown here: https://jsfiddle.net/L62w981g/1/

Here is the code for the overflow fix:

div {
  background-color:red;
  height:60px;
  overflow:hidden;
  width:350px;
}
<div>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden
</div>

Here is the code for the white-space fix:

div {
  background-color:red;
  height:60px;
  overflow:hidden;
  width:350px;
  word-break:break-all;
  white-space:normal;
}
<div>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden
</div>

Upvotes: 2

Related Questions