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

Question

我正在构建一个高分页面模板， 如果用户名和/或分数太长，想要修剪用户名（理想情况下是CSS）。 看到这张图片：

我可以用

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

要修剪用户名，但我怎样才能相对于得分长度进行修剪？

你知道这是怎么做到的吗？ 这是我当前代码的Codepen：http://codepen.io/anon/pen/yymZGM

由于

Answer 1

只需在名称

之前移动得分范围（向右浮动）

更新了CODEPEN

＆＃13;

＆＃13;

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

＆＃13;

<div id="highscores" class="celio-black">
  <p id="round-4" class="round">
    <span class="round-score">75</span>
    <span class="round-index">01</span>
    <span class="round-author">grosbouff</span>

  </p>
  <p id="round-1" class="round">
    <span class="round-score">75486987</span>
    <span class="round-index">02</span>
    <span class="round-author">I have a super long name isn't it ?</span>

  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从语义上讲，你需要<table>，这样更简单：

<强> HTML

<table id="highscores" class="celio-black">
  <tr id="round-4" class="round">
    <td class="round-index">01</td>
    <td class="round-author">grosbouff</td>
    <td class="round-score">75</td>
  </tr>                            
  <tr id="round-1" class="round">
    <td class="round-index">02</td>
    <td class="round-author">I have a super long name isn't it ?</td>
    <td class="round-score">75486987</td>
  </tr>                                              
</table>

<强烈> SCSS

#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 {
        }
    }
}

Answer 3

请尝试以下操作： Demo

.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;
}