如何将 div 文本翻转回正常状态？

Question

我正在尝试将聊天气泡中的文本翻转回正常状态。注意：我用 transform: scaleX(-1); 翻转 div;以便让它在右侧看起来正确。但是一个后遗症也翻转了我里面的文字！我现在整天都在做这件事，有没有人有一个简单的解决方案来解决这个问题。或者，如果可能，您知道如何翻转 div 聊天 clip.png 而不是保持状态吗？

谢谢美味

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chatbox {
    position: absolute;
    height: 200px;
    width: 400px;
    padding-top: 20px;
    padding-left: 50px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0, 0, 0, .4);
}
    .bubble {
    position: absolute;
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0, 0, 0, .3);
}
    .bubble2 {
    position: absolute;
    transform: scaleX(-1);
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0, 0, 0, .3);
}
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .5px;
}
    .right {
    right:50px;
}
    .flip {
    transform: scale(-1, 1);
}

<div class="chatbox">

<div class="bubble2 right chattext">
<div><img src="http://wizzfree.com/pix/bubble1.png" width="13" style="margin-left:-23px;">&nbsp;
Yummi: Thx your sooo sweet! </div></div>

<div class="bubble chattext" style="margin-top: 50px;">
<div><img src="http://wizzfree.com/pix/bubble1.png" width="13" style="margin-left:-23px;">&nbsp;
You: how are you do you find your cat? you are so lovely today. what u doing?</div></div>

Answer 1

只需将跨度添加到文本并再次翻转

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chatbox {
    position: absolute;
    height: 200px;
    width: 400px;
    padding-top: 20px;
    padding-left: 50px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0, 0, 0, .4);
}
    .bubble {
    position: absolute;
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0, 0, 0, .3);
}
    .bubble2 {
    position: absolute;
    transform: scaleX(-1);
    max-width:200px;
    padding: 10px;
    padding-top: 0px;
    border-radius: 0px 20px 20px 20px;
    background-color:rgba(0, 0, 0, .3);
}
.bubble2 span{
    transform: scale(-1, 1);
    display: inline-flex;
}
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .5px;
}
    .right {
    right:50px;
}
    .flip {
    transform: scale(-1, 1);
}

<div class="chatbox">

<div class="bubble2 right chattext">
<div><img src="http://wizzfree.com/pix/bubble1.png" width="13" style="margin-left:-23px;">&nbsp;
<span>Yummi: Thx your sooo sweet! </span></div></div>

<div class="bubble chattext" style="margin-top: 50px;">
<div><img src="http://wizzfree.com/pix/bubble1.png" width="13" style="margin-left:-23px;">&nbsp;
You: how are you do you find your cat? you are so lovely today. what u doing?</div></div>

如何将 div 文本翻转回正常状态？

How can i flip div text back to normal?

html

flexbox

transform

text-alignment

divide