0

ハイスコ​​アのページ テンプレートを作成しています。ユーザー名やスコアが長すぎる場合は、(理想的には CSS を使用して) ユーザー名を削除したいと考えています。この写真を参照してください:

ハイスコ​​アページのテンプレート

使うことができます

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

ユーザー名をトリミングするにはどうすればスコアの長さに合わせてトリミングできますか?

これを行う方法についてのアイデアはありますか？ここに私の現在のコードの Codepen があります: http://codepen.io/anon/pen/yymZGM

ありがとう

4

3 に答える 3

3

名前の前にスコア スパン (右に浮いている) を移動するだけです。

更新されたCODEPEN

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

于 2015-04-16T08:22:22.870 に答える