html - 从右到左显示 block 和内联词

Question

我想从右到左呈现列表，
这是初步试验:

<ul style="direction: rtl; ">
    <li >Casecading Style Sheet</li>
    <li>Hypertext Markup Language</li>
</ul>

如何显示为

                                               Sheet Style Casecading - 
                                            Language Markup Hypertext- 

Answer 1

纯 CSS 无法完成这项工作，但很少有 JS 可以提供帮助。

我取每个字符串，拆分它并重新加入反向。我对 ul 使用 display: none 然后使用 document.getElementById('list').style.display = 'block'; 以避免文本反转时闪烁。

片段

window.onload = function() {
  var elements = document.getElementsByTagName('li');
  for (var i = 0; i < elements.length; i++) {
    var text = elements[i].innerHTML;
    var textReversed = text.split(' ').reverse().join(' ');
    elements[i].innerHTML = textReversed;
  }
  document.getElementById('list').style.display = 'block';
};

ul {
  display: none;
  direction: rtl;
}

<ul id="list">
  <li>Casecading Style Sheet</li>
  <li>Hypertext Markup Language</li>
</ul>