Установите фон как можно шире текста и выровняйте его влево после разрыва строки

Question

Это пример окна чата, где я хочу, чтобы элементы с правой стороны были расположены справа, я также хочу, чтобы фон был таким же широким, как текст:

<div id="msgWindow" class="block"> 
<div id="messages"> 
<p class="sysmsg">You're now connected with a random chat partner...</p> 
<p class="sysmsg">Say Hello!</p> 
<p class="msg-item"><span class="you">hi</span></p> 
<p class="msg-item"><span class="you">this is a long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord</span></p> 
</div> 
</div> 

Я пытаюсь с этим CSS код:

#msgWindow{ 
    position: relative; 
} 
#messages{ 
    height: 350px; 
    padding: 10px; 
    overflow: auto; 
    word-wrap: break-word; 
} 
#messages p{ 
    padding: 5px 0; 
    } 
.msg-item{ 
} 
.you, .stranger{ 
    padding: 4px; 
    color: #FFF4F4; 
    font-weight: bold; 
    border-radius: 0.5em; 
    -moz-border-radius: 0.5em; 
    -webkit-border-radius: 0.5em; 
    margin-right: 5px; 
} 
span.you{  
    display: inherit; 
    margin-left: 60%; 
    width: 100px; 
    background-color: #555; 
    text-align: right; 
    word-wrap: break-word; 
    direction: rtl; 
} 

, но текст не выравнивание по левому краю после разрыва строки, а также фон не установлен только для текста.

Это демо, что я говорю: https://jsfiddle.net/dhb0r3k7/

Любая помощь будет оценен по достоинству!

Answer 1

Если я правильно читаю ваш вопрос, вы ищете текстовые поля с переменным размером, справа размещенные с выровненным по левому краю текстом. Вы могли бы попробовать что-то вроде этого:

.msg-item{ 
    clear: both; // <-- one msg item per row 
} 
span.you{  
    float:right; // <-- right floated text box 
    max-width: 40%; // <-- up to 40% of parent div 
    text-align: left; // <-- text is left-aligned 
    margin-left: 60%; 
    background-color: #555; 
    word-wrap: break-word; 
    direction: rtl; 
} 

Answer 2

Вашего вопроса не совсем понятно, о чем вы просите, но я думаю, что это то, что вы ищете:

На вашей msgWindow DIV, положить display: inline-block. И в вашем классе span.you, изменить textAlign: right на textAlign: left