將背景設置爲與文本一樣寬並在換行後對齊左側

這是一個聊天框示例，我希望span.p元素位於右側，我也希望背景與文本一樣寬：將背景設置爲與文本一樣寬並在換行後對齊左側

<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/

任何幫助，將不勝感激！

來源

2016-12-29 h_h10a

如果我正在閱讀您的問題，您正在尋找具有左對齊文本的可變大小右浮動文本框。你可以嘗試這樣的事：

.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; 
}

來源

2016-12-29 19:36:47 zebraman

你的問題是不是你問完全清楚，但我覺得這是你在找什麼：

在您msgWindow格，放display: inline-block。並在您的span.you班級中，將textAlign: right更改爲textAlign: left

來源

2016-12-29 19:36:55 Nerrickk

將背景設置爲與文本一樣寬並在換行後對齊左側

回答

相關問題