在highscores模板中修剪文本（使用CSS？）

我正在建立一个高分页面模板， 如果用户名和/或分数太长，则希望修剪用户名（最好使用CSS）。 见下图：

我可以用

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-y:none;

要修剪用户名，但如何相对于分数长度修剪它

你知道怎么做吗？ 这是我当前代码的代码笔：

谢谢

只需将分数跨度（向右浮动）移到名称之前

更新

#高分{
宽度：400px；
填充：1em；
背景颜色：黄色；
保证金：自动；
字号：1.5em；
}
#高分，回合{
字体大小：1.2米；
线高：1.2米；
高度：1.2米；
位置：相对位置；
背景色：红色；
填充：0.4em0；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
溢出y：无；
}
#高分，四舍五入，四舍五入索引{
右：2%；
}
#高分，全面，全面{
字号：700；
宽度：60%；
}
#高分，满分，满分{
宽度：28%；
浮动：对；
文本对齐：右对齐；
}

75
01
格罗斯波夫


75486987
02
我有一个超长的名字，不是吗？

只需将分数跨度（向右浮动）移到名称之前即可

更新

#高分{
宽度：400px；
填充：1em；
背景颜色：黄色；
保证金：自动；
字号：1.5em；
}
#高分，回合{
字体大小：1.2米；
线高：1.2米；
高度：1.2米；
位置：相对位置；
背景色：红色；
填充：0.4em0；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
溢出y：无；
}
#高分，四舍五入，四舍五入索引{
右：2%；
}
#高分，全面，全面{
字号：700；
宽度：60%；
}
#高分，满分，满分{
宽度：28%；
浮动：对；
文本对齐：右对齐；
}

75
01
格罗斯波夫


75486987
02
我有一个超长的名字，不是吗？

像这样尝试：

.round {
    font-size: 1.2em;
    line-height: 1.2em;
    height:1.2em;
    position: relative;
    padding: 0.4em 0;
    overflow-y:none;
}
.round-index {
    padding-right: 2%;   
}
.round-author {
    font-weight: 700;
    width: 60%;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color:red;  
    display:inline-block;
}
.round-score {
    width: 28%;
    float: right;
    text-align: right;    
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color:green;  
    display:inline-block;
}

试着这样做：

.round {
    font-size: 1.2em;
    line-height: 1.2em;
    height:1.2em;
    position: relative;
    padding: 0.4em 0;
    overflow-y:none;
}
.round-index {
    padding-right: 2%;   
}
.round-author {
    font-weight: 700;
    width: 60%;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color:red;  
    display:inline-block;
}
.round-score {
    width: 28%;
    float: right;
    text-align: right;    
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color:green;  
    display:inline-block;
}

---

从语义上讲，您需要一个

，这样更简单：

HTML

---

从语义上讲，您需要一个

，这样更简单：

HTML

---

可以使用display:flex；在你的项目中？你真的应该使用表格来显示表格数据。我知道很多web开发人员认为表是纯粹的邪恶，但这正是它们的用途；在你的项目中？你真的应该使用表格来显示表格数据。我知道很多web开发人员认为表是纯粹的邪恶，但这正是它们有用的地方。

#highscores {
    width: 400px;
    padding: 1em;
    background-color: yellow;
    margin: auto;
    font-size: 1.5em;
    table-layout: fixed;
    border-collapse: collapse;
    .round {
        font-size: 1.2em;
        line-height: 1.2em;
        height: 1.2em;
        position: relative;
        background-color: red;
        padding: 0.4em 0;
        .round-index {
            padding-right: 2%;
        }
        .round-author {
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-y: none;

        }
        .round-score {
        }
    }
}