23

これらのcssを追加しました。しかし、プレースホルダー/透かしに省略記号を付けることができません。ただし、赤いフォントがあります。

input::-webkit-input-placeholder {
    color:    red !important;
    max-width:  95% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

input:-moz-placeholder {
    color:    red !important;
    max-width:  95% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

私はモバイルで作業しているので、Safari で動作するようにしたいと考えています。

4

5 に答える 5

18

はい

プレースホルダーのオーバーフロー省略記号は、非常に簡単に実現できます。

::placeholder{
    text-overflow:ellipsis;
}


::placeholder{
    text-overflow:ellipsis;
}

input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>

結果は、属性セレクターを使用して達成することもできます。

[placeholder]{
    text-overflow:ellipsis;
}

これにより、一部のブラウザーで入力値に省略記号が追加されるという副作用も追加されます。これは、望ましい場合と望ましくない場合があります。

[placeholder]{
    text-overflow:ellipsis;
}

input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
<input value="A long value to demonstrate"></input>

Firefox と Chrome でテストされ、動作しています。

いつものようにIEはボールをプレーしません！

古いブラウザ

  • 古いブラウザのサポートが必要ですか?
  • IE がうまく動作しませんか？

プレースホルダーをシミュレートするための小さな css ハックを作成しました。このコードを使用して、入力プレースホルダーをシミュレートします。少し汚れていますが、IE6までさかのぼってサポートを提供できます。

.ellipsis{
  box-sizing:border-box;
  position:relative;
  padding:0 5px;
  background:#fff;
  color:rgba(0,0,0,0.5);
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ellipsis input{
  box-sizing:border-box;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:block;
  background:none;
  border:1px solid #ddd;
  color:#000;
  padding:0 5px;
}
.ellipsis input:focus{
  background:#fff;
}
<div class="ellipsis">
  A Long Placeholder to demonstrate A Long Placeholder to demonstrate A Long Placeholder to demonstrate
  <input></input>
</div>

この範囲外のサポートには JavaScript が必要です。

于 2014-03-04T16:56:50.777 に答える
0

仕様によると、はdivやpタグtext-overflowなどのブロック コンテナーにのみ適用されます。入力はコンテナーではないため、この CSS ルールを適用することはできません。

于 2012-12-31T03:45:30.073 に答える