如何在CSS代码中应用BDI标签？

Question

我在页面的多个位置使用bdi标签。

我想知道是否可以通过某种方式将此标签作为css类的一部分应用？

编辑：

我正在尝试为下拉列表项提供此解决方案，因此bdi功能将解决其中带有方括号的问题：

那是我到目前为止所尝试的：

<form:select id="locale" path="locale">                 
    <c:forEach items="${locales}" var="loc">
        <c:choose>                          
        <c:when test="${loc.key == currentLocale}">
            <option itemValue="key" value="${loc.key}" selected><bdi><div>${loc.value}</div></bdi></option>
        </c:when>
        <c:otherwise>
            <option itemValue="key" value="${loc.key}"><bdi><div>${loc.value}</div></bdi></option>
        </c:otherwise>
        </c:choose>                                     
    </c:forEach>
</form:select>

Answer 1

通过CSS指定文本方向

为此使用direction: ltr和direction: rtl。您需要弄清楚每个选项的文本方向。然后指定正确的选项类：

select {
  width: 200px;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

<select class="rtl">
  <option class="ltr">English (United States)</option>
  <option class="rtl">(ישראל) עִברִית</option>
</select>

我认为这可以解决您的牙套问题。我想您希望所有选项都使文本右对齐。我试图完成这项工作，但找不到办法。

Answer 2

您可以使用CSS属性unicode-bidi，该属性与direction属性一起使用时，会产生html bdi的风格。

下面的演示代码段显示了一个有效的示例：

.bdi {
  direction: ltr;
}

<select>
  <option class="bdi">English (United States)</option>
  <option class="bdi">(ישראל) עִברִית</option>
</select>

如果您在这方面需要更多信息或其他用例，这里是unicode-bidi和direction的MDN页面链接。