将背景设置为与文本一样宽并在换行后对齐左侧

这是一个聊天框示例，我希望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

将背景设置为与文本一样宽并在换行后对齐左侧

回答

相关问题