问题描述
我试图将聊天气泡中的文本恢复正常。注意:我使用以下变换翻转div:scaleX(-1);这样才能使其在右侧看起来正确。但是后效应也会使我的文字翻转!我整日忙于工作,没有人有解决此问题的简单解决方案。或者,如果可能的话,您知道如何翻转div chat clip.png而不是保留东西吗?
Thy yummi
String url = "https://www.Tradingview.com/symbols/BTCUSDT/?exchange=BINANCE";
try (final WebClient webClient = new WebClient(browserVersion.FIREFOX)) {
webClient.getoptions().setThrowExceptionOnScriptError(false);
HtmlPage page = webClient.getPage(url);
webClient.waitForBackgroundJavaScript(20_000);
System.out.println(" ---- ");
System.out.println(page.asText());
System.out.println(" ---- ");
}
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,.4);
}
.bubble {
position: absolute;
max-width:200px;
padding: 10px;
padding-top: 0px;
border-radius: 0px 20px 20px 20px;
background-color:rgba(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,.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);
}
解决方法
只需将跨度添加到文本并再次翻转
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,.4);
}
.bubble {
position: absolute;
max-width:200px;
padding: 10px;
padding-top: 0px;
border-radius: 0px 20px 20px 20px;
background-color:rgba(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,.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;">
<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;">
You: how are you do you find your cat? you are so lovely today. what u doing?</div></div>