0

長い単語を使用すると、ellipsis単語が壊れて別の行に移動します。1行にまとめられないようです。私は試してみました。何か案は？id:[ ]white-space: nowrapdisplay: inline-block

https://jsfiddle.net/b35m449x/4/

HTML

<div class="container">id: [<div class="trunc">userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>]</div>

CSS

.container {
   display: inline-block;
   white-space: nowrap;
   border: 1px solid black;
   width: 100%;
}
.trunc {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   white-space: nowrap;
}
4

3 に答える 3

0

更新されたフィドルを見つけてください。うまくいくはずです。コードの更新は次のとおりです。

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid black;
  width: 100%;
  vertical-align:bottom;
}
.trunc {
   width: 20%;
   display: inline-block;
   vertical-align:bottom;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   white-space: nowrap;
}

追加の表示に注意してください: inline-block

更新されたフィドル - https://jsfiddle.net/b35m449x/4/

于 2016-10-15T07:29:15.003 に答える
0

これは、コード内で別のものを使用しているために発生している可能性がありdivます。不要な場合は、div削除してコンテナを次のように変更します。

.container {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
border: 1px solid black;
width: 100%;
}

そして、それはうまくいきます。

ただし、その特定の行 (userrr...) に別のスタイルを適用したい場合は、要素divを withに置き換えることをお勧めしますspan。ここでも、クラスでellipsisandを定義する必要があることに注意してください。overflowcontainer

少し役に立てば幸いです！

于 2016-10-15T06:08:10.920 に答える
0

疑似要素が助けに！https://jsfiddle.net/0pmzq3p4/

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid black;
  width: 100%;
}
.trunc {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.trunc::before,
.trunc::after {
  white-space: pre;
}
.trunc::before {
  content: 'id: [\A\00a0';
}
.trunc::after {
  content: '\A]';
}
<div class="container">
  <div class="trunc">
userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
  </div>
</div>

ソース:

  1. 私の知識
  2. https://stackoverflow.com/a/17047836/915875
  3. https://stackoverflow.com/a/5467676/915875
于 2016-10-15T07:13:26.690 に答える