CSS 属性中的"embed"值和"isolate"值有什么区别"unicode-bidi"?



请参阅示例。在那里,我为这两个值编写了代码,它们给出了相同的结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hayti</title>
<style>
p
{
direction: ltr;
}
span
{
background-color: yellow;
direction: rtl;
unicode-bidi: embed;
}

.p01
{
direction: ltr;
}
.span01
{
background-color: yellow;
direction: rtl;
unicode-bidi: isolate;
}
</style>
</head>
<body>
<h1>Two samples </h1>
<p> Programming in <span>Html and CSs!!</span> is the easiest way to learn coding. </p>
<p class="p01"> Programming in <span class="span01">Html and CSs!!</span> is the easiest 
way to learn coding. </p>
</body>
</html>

结果是`

----嵌入----中编程!!Html和CSs是学习编码的最简单方法。

----隔离----中编程!!Html和CSs是学习编码的最简单方法。

这里有一个例子,它们给出了不同的结果。

.ex1 span
{
direction: rtl;
unicode-bidi: embed;
}
.ex2 span
{
direction: rtl;
unicode-bidi: isolate;
}
<h1>Two samples </h1>
<p class=ex1> Programming in <span>Html <span>and</span> CSS!!</span> is the easiest way to learn coding. </p>
<p class=ex2> Programming in <span>Html <span>and</span> CSS!!</span> is the easiest way to learn coding. </p>

您可以看到,在嵌入情况下,外部跨度的单词被视为从右到左的一个单词,而在隔离情况下,从左到右的单词被内部跨度打断。

最新更新