CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mandy Lastra
Mandy Lastra

Reputation: 181

How to prevent text from going outside a div?

I have looked at several solutions to this question but none of them work for me. I am appending a paragraph to a div and the text goes out of the element. Here is my code. Please help.

CSS:

chat-h {
  margin-left: 7px;
  width: 249px;
  background: red;
}

#chat-p {
  width: 150px;
  background-color: #fff;
  word-wrap: break-word;
}
.msg span {
  font-weight: bold;
  color: blue;
}

and JQuery

function appendMsg(user, msg) {
    var $cont = $("#chat-h");
    $cont[0].scrollTop = $cont[0].scrollHeight;
    $cont.append("<p class='msg' id='chat-p'><span>" + user + ":  </span> " + msg + " </p>");
}

Upvotes: 1

Views: 8648

Answers (2)

alxzaur
alxzaur

Reputation: 81

Use the white-space and overflow properties:

#chat-p {
  width: 150px;
  background-color: #fff;
  white-space: nowrap; /* or `pre` */
  overflow: hidden;
}

And (optionally) add hellip at the end of line:

text-overflow: ellipsis;

Example

Upvotes: 0

TankorSmash
TankorSmash

Reputation: 12747

Use text-overflow

div {
    text-overflow: clip;
}

Upvotes: 1

Related Questions