1

我正在尝试设计一个选择框，其中元素可能采用多种语言。我希望所有文本都以相同的方式对齐（向右或向左，或者甚至居中）并且文本方向正确。我可以从后端以编程方式执行此操作，但这很痛苦，所以如果可能的话，我正在寻找 HTML/CSS/(JS) 解决方案。

此解决方案使文本统一对齐，但是 ltr 文本的方向错误（假设Arabic (Saudi)是翻译的）

<select dir="ltr">
  <option value="/es_PE/">español (Perú)</option>
  <option value="/ar_SA/">Arabic (Saudi)</option>
</select>

输出：

español (Perú)
Saudi) Arabic)

此解决方案确保文本方向正确，但文本对齐方式不统一。

<select>
  <option value="/es_PE/" dir="auto">español (Perú)</option>
  <option value="/ar_SA/" dir="auto">Arabic (Saudi)</option>
</select>

输出：

español (Perú)
        (Saudi) Arabic

JSFiddle：https ://jsfiddle.net/d1v9hs8v/1/

是否有某种方法可以确保整个字符串的文本方向正确，并为每个选项提供统一的文本对齐方式？css 样式似乎对text-alignment选择对象没有影响。

编辑：这可能只是 Chrome 的问题。FF 和 IE 似乎可以正确呈现第二个解决方案。

4

0 回答 0