CODEWITHSUNDEEP
htmlcss
Ricki Moore
Ricki Moore

Reputation: 1223

Facebook style message bubble using span

I'm using an <ul> with <li> to show a string of messages like on facebook. I'm using span because i only want the length of the message to have the background color and border. Ive tried to make a div inside the li with an width at auto and using <p> tags to achieve this but only span is doing it so far. However with the span when the line breaks it looks like this:

weird breakage of the span background

enter image description here HTML

<ul>    
    <li class = "msg_list" data-soyid = "{{$message->user_id}}">
        <div style = "width: auto" class = "fl_bx">
           <section>
                <span>
                        {{$message->body}}
                </span>
            </section>
        </div>
    </li>
</ul>

CSS

.msg_list{
    margin-top: 5px;
    margin-bottom: 10px;
}
.msg_list span{
    padding: 3px;
    background: beige;
    border-radius: 5px;
    border: 1px solid black;
}

.user_chat{
    text-align: right;
}
.response_chat{
    text-align: left;
}

Upvotes: 1

Views: 1137

Answers (1)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

Because a span is not a block element you should add this CSS rule to your span: display:inline-block;

Try it here:

.msg_list{
    margin-top: 5px;
    margin-bottom: 10px;
}
.msg_list .msg{
    padding: 3px;
    background: beige;
    border-radius: 5px;
    border: 1px solid black;
    display: inline-block;
    
}


.user_chat{
    text-align: right;
}
.response_chat{
    text-align: left;
}
<ul>    
<li class = "msg_list" data-soyid = "{{$message->user_id}}">
        <div style = "width: auto" class = "fl_bx">
           <section>
                <span class="msg">
                        very looooooooooooooooooooooooooong line.
                </span>
            </section>
        </div>
    </li>
</ul>

You can easily change container width and play with it in this fiddle

Upvotes: 2

Related Questions