João Rodrigo Castro João Rodrigo Castro - 6 months ago 9
HTML Question

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

I am trying to limit a text to a divs with and can not get it to work.
Where it says TESTE3 I want the text not to go more then the red div. Can anyone help me please?
Image sample

Answer

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>