0

我使用 Courier New 字体来显示在我的单一用途街机游戏网站上取得的前 10 名得分（见附件截图在此处输入图像描述）。拉丁字符和扩展西里尔字符的玩家别名完美对齐，但有人决定输入亚洲（看起来是中文）字符的昵称，而我的 JS (TS) 代码无法正确处理它，所以玩家名字后面的列得到转移了。任何人都知道处理这个问题的最佳方法吗？由于它的重要性值得怀疑，我一直在考虑不要管它，但我仍然很好奇。我已经检查了这篇文章，它似乎与所描述的问题没有直接关系。

为下面的代码编辑。

CSS：

.titleLabel {
margin-top: 7px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 30px;
text-align: center;
color: blue;}
.dash {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: blue;}
.dashRed {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: red;}
.dashSpace {
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: #f0f0f0;}

HTML：

<div>
<div class="titleLabel">T O P  10  S C O R E S</div>
<!-- headings -->
<span class="dash" id="p1"><span class="dashSpace">-----</span>1<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>
<!-- p2... p9 -->
<span class="dash" id="p10"><span class="dashSpace">----</span>10<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>

dashRed 类用于向刚刚完成游戏并成功进入前 10 名的玩家显示分数。较早的分数以蓝色显示。id 为“p1”到“p10”的 HTML 代码行被 JavaScript 代码动态替换为 window.sessionStorage 中的数据。

4

0 回答 0