CSS for A and B messages

Question

I have the following span with messages exchanged between a user A and a B. How can I configure these spans to appear each on your line. The way I got the style of span it overwrites messages on the same line.

<div class="jd-user">           
<div class="jd-header" id="44">marisa09 •<span class="close-this"> X </span></div>          
<div class="jd-body"><span class="me"> <span class="me"> Oii </span><span class="me"> teste </span>
<span class="me"> Olá </span>
<span class="other"> Oi </span>

<span class="me"> oii </span></span></div>          
<div class="jd-footer"><input id="textareabox" placeholder="escrever...">  </div>       
</div>

Style:

#jd-chat .jd-body {
overflow: scroll;

min-height: 250px;
background: #FFFFFF;
overflow-x: hidden;
}

#jd-chat .jd-body  span.me
{   


background:#DB3256;
display:block;
border-radius: 25px;
color:white;

}

#jd-chat .jd-body span.other
{
background: #337ab7;
display:block;
float:right;
border-radius: 25px;

}

My other doubt is, having the body chat with maximum width 250px, how can I make the message to be a paragraph when it reaches 250px on body

#jd-chat .jd-body

{
overflow: scroll;

max-height:250px;
min-height:250px;
background:#FFFFFF;
overflow-x: hidden;

}

Answer 1

In your code - I don’t know if it was missing css - did not work because classes start with id #jd-chat but the html does not have this definition, therefore the css is never being applied to html.

Another point I’ve noticed is that you’re encompassing both the span.me as span.other WITHIN A span.me, that is, it will not get the result you want.

Your HTML would be better organized like this:

<div class="jd-body">
    <div>
        <span class="me"> Oii </span>
        <span class="me"> teste </span>
        <span class="me"> Olá </span>
        <span class="other"> Oi </span>
        <span class="me"> oii </span>
    </div>
</div>

and the css:

.jd-body {
    overflow: scroll;
    max-height: 250px;
    min-height: 250px;
    background: #FFFFFF;
    overflow-x: hidden;
}
.jd-body span {
    display:block;

    /*-apenas para estilo-*/
    margin-bottom:10px;
    padding:4px 8px;
    color: white;
}
.jd-body  span.me{   
    background:#DB3256;
    border-radius: 25px;
}
.jd-body span.other {
    background: #337ab7;
    border-radius: 25px;
    text-align:right;
}

See this example of tidy code: https://jsfiddle.net/4kfgq8L9/

---

See this example, to make the layout a little cooler: https://jsfiddle.net/4kfgq8L9/1/

I just put every span within a div.linha, this div has 100% width and the span has the width only of the text inside it, with a float left or right, depending on whether it is .me or .other