css: inline css to stop content from resizing parent

Question

I have a randomly generated content which greatly resizes the element. I receive real time msgs via javascript pusher.js library

<span class="msg" style="font-style:italic;width:30%;min-wdith:30%;max-width:30%;"> random length msg here </span><br>

I tried to have it fixed at 30% but whenever the text string msg gets super long the span ends up stretching to far end of page horizontally

This is problematic because when msg rate increases, the element, "dances"

Typo: `min-wdith:30%;`. Also, duplicate? http://stackoverflow.com/questions/621401/css-width-of-a-span-tag — J. Titus, Feb 23 '16 at 19:44
Possible duplicate of [How to force a line break in a loooooong word in a DIV?](http://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-loooooong-word-in-a-div) — Blazemonger, Feb 23 '16 at 20:01

score 2 · Accepted Answer · answered Feb 23 '16 at 20:09

2

You need to change the display property of the span to inline-block

.msg{
  display: inline-block;
}

answered Feb 23 '16 at 20:09

Juan

1 Answers1