如何解决多语言站点的块引用已反转
'我将编写一个使用阿拉伯语的网站。它从右到左读取。格式化将在页面的其余部分进行,但不会在blockquote中进行。我试图用lang属性设置它,但是当我这样做时,在引号之前。 我要向社区寻求经验和可能的陷阱。'
'''
blockquote {
background-color: #f4f7fc;
font-size: 20px;
color: #191514;
line-height: 1.7;
position: relative;
padding: 50px 30px 30px 115px;
font-family: 'Poppins',sans-serif;
clear: both;
margin: 40px 0;
overflow: hidden;
}
blockquote p {
margin-bottom: 0 !important;
}
blockquote cite {
font-style: normal;
display: block;
color: #9b6f45;
font-weight: 700;
font-size: 16px;
margin-top: 11px;
}
blockquote:before {
content: '\f10d';
font-family: "FontAwesome";
color: #d5aa6d;
font-size: 28px;
position: absolute;
left: 22px;
top: 10px;
font-style: normal;
background-image: -webkit-gradient(linear,left top,left bottom,from(#d5aa6d),to(#9b6f45));
background-image: -webkit-linear-gradient(top,#d5aa6d,#9b6f45);
background-image: -moz-linear-gradient(top,#9b6f45);
background-image: -ms-linear-gradient(top,#9b6f45);
background-image: -o-linear-gradient(top,#9b6f45);
background-image: linear-gradient(top,#9b6f45);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d',endColorStr='#9b6f45');
background-color: transparent;
background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
z-index: 2;
}
blockquote:after {
content: '\f10e';
font-family: "FontAwesome";
color: #d5aa6d;
font-size: 28px;
position: absolute;
right: 22px;
bottom: 10px;
font-style: normal;
background-image: -webkit-gradient(linear,endColorStr='#9b6f45');
background-color: transparent;
background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
z-index: 2;
}
}
'''
'''
<blockquote lang="en">
<ul>
<li>This is in english</li>
</ul>
</blockquote>
<blockquote lang="ar">
<ul>
<li>هذا باللغة العربية</li>
</ul>
</blockquote>
'''
解决方法
您可以在blockquote标签上定位属性lang并添加方向规则:
blockquote[lang="ar"] {
direction: rtl;
}
blockquote {
background-color: #f4f7fc;
font-size: 20px;
color: #191514;
line-height: 1.7;
position: relative;
padding: 50px 30px 30px 115px;
font-family: 'Poppins',sans-serif;
clear: both;
margin: 40px 0;
overflow: hidden;
}
blockquote[lang="ar"] {
direction: rtl;
}
blockquote p {
margin-bottom: 0 !important;
}
blockquote cite {
font-style: normal;
display: block;
color: #9b6f45;
font-weight: 700;
font-size: 16px;
margin-top: 11px;
}
blockquote:before {
content: '\f10d';
font-family: "FontAwesome";
color: #d5aa6d;
font-size: 28px;
position: absolute;
left: 22px;
top: 10px;
font-style: normal;
background-image: -webkit-gradient(linear,left top,left bottom,from(#d5aa6d),to(#9b6f45));
background-image: -webkit-linear-gradient(top,#d5aa6d,#9b6f45);
background-image: -moz-linear-gradient(top,#9b6f45);
background-image: -ms-linear-gradient(top,#9b6f45);
background-image: -o-linear-gradient(top,#9b6f45);
background-image: linear-gradient(top,#9b6f45);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d',endColorStr='#9b6f45');
background-color: transparent;
background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
z-index: 2;
}
blockquote[lang="ar"]:before {
content: '\f10e';
right: 22px;
left: auto;
}
blockquote:after {
content: '\f10e';
font-family: "FontAwesome";
color: #d5aa6d;
font-size: 28px;
position: absolute;
right: 22px;
bottom: 10px;
font-style: normal;
background-image: -webkit-gradient(linear,endColorStr='#9b6f45');
background-color: transparent;
background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
z-index: 2;
}
blockquote[lang="ar"]:after {
content: '\f10d';
right: auto;
left: 22px;
}
'''
'''
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<blockquote lang="en">
<ul>
<li>This is in english</li>
</ul>
</blockquote>
<blockquote lang="ar">
<ul>
<li>هذا باللغة العربية</li>
</ul>
</blockquote>
,
将类添加到blockquote元素,并将类样式方向属性设置为rtl
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。