Question

HTML ol元素可以使用type="a"属性显示项目的字母列表。不幸的是，该列表始终是英文。

我需要该列表位于威尔士语中，其字母表略有不同（a，b，c，ch，d，dd，...）。

我尝试使用以下内容修改文档的语言而没有和运气：

<html lang="cy" ng-app="app">

Answer 1

这是css解决方案：

body {
    font-family: Arial, sans-serif;
}
.welsch {
    list-style: none;
}
.welsch li:before {
    display: inline-block;
    position: absolute;
    left: 20px;
    width: 20px;
    text-align: right;
}
.welsch li:nth-child(29n+1):before {
    content:"a.";
}
.welsch li:nth-child(29n+2):before {
    content:"b.";
}
.welsch li:nth-child(29n+3):before {
    content:"c.";
}
.welsch li:nth-child(29n+4):before {
    content:"ch.";
}
.welsch li:nth-child(29n+5):before {
    content:"d.";
}
.welsch li:nth-child(29n+6):before {
    content:"dd.";
}
.welsch li:nth-child(29n+7):before {
    content:"e.";
}
.welsch li:nth-child(29n+8):before {
    content:"f.";
}
.welsch li:nth-child(29n+9):before {
    content:"ff.";
}
.welsch li:nth-child(29n+10):before {
    content:"g.";
}
.welsch li:nth-child(29n+11):before {
    content:"ng.";
}
.welsch li:nth-child(29n+12):before {
    content:"h.";
}
.welsch li:nth-child(29n+13):before {
    content:"i.";
}
.welsch li:nth-child(29n+14):before {
    content:"j.";
}
.welsch li:nth-child(29n+15):before {
    content:"l.";
}
.welsch li:nth-child(29n+16):before {
    content:"ll.";
}
.welsch li:nth-child(29n+17):before {
    content:"m.";
}
.welsch li:nth-child(29n+18):before {
    content:"n.";
}
.welsch li:nth-child(29n+19):before {
    content:"o.";
}
.welsch li:nth-child(29n+20):before {
    content:"p.";
}
.welsch li:nth-child(29n+21):before {
    content:"ph.";
}
.welsch li:nth-child(29n+22):before {
    content:"r.";
}
.welsch li:nth-child(29n+23):before {
    content:"rh.";
}
.welsch li:nth-child(29n+24):before {
    content:"s.";
}
.welsch li:nth-child(29n+25):before {
    content:"t.";
}
.welsch li:nth-child(29n+26):before {
    content:"th.";
}
.welsch li:nth-child(29n+27):before {
    content:"u.";
}
.welsch li:nth-child(29n+28):before {
    content:"w.";
}
.welsch li:nth-child(29n+29):before {
    content:"y.";
}

<ol class="welsch">
	<li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li>
</ol>

同样在 Fiddle 。

Answer 2

现在没办法做那种跨浏览器。除了英语之外，Mozilla支持的语言很少，我只能建议你写一个指令 - 无论如何。

你可以使用，f.e。 CSS根据列表长度显示不同的字母......

相关：Style an ordered list with Cyrillic letters

Answer 3

CSS Counter Styles Level 3规范引入了更灵活的计数器。

var seconds = new Date().getTime(), last = seconds,

intrvl = setInterval(function() {
    var now = new Date().getTime();

    if(now - last > 5){
        if(confirm("Delay registered, terminate?")){
            clearInterval(intrvl);
            return;
        }
    }

    last = now;
    timer.innerHTML = now - seconds;

}, 333);

＆＃13;

@counter-style welsh {
  symbols: a b c ch d dd e f ff g ng h i l ll m n o p ph r rh s t th u w y;
}
ul.welsh {
  list-style: welsh;
}

＆＃13;

@counter-style welsh {
  symbols: a b c ch d dd e f ff g ng h i l ll m n o p ph r rh s t th u w y;
}
.welsh {
  list-style: welsh;
}

＆＃13;

有关详细信息，请参阅Introducing @counter-style和@counter-style。

请注意，目前只支持Firefox 33+。

如何在外语字母表中显示`ol`元素？

3 个答案: