Ist es möglich, Platzhalter/Wasserzeichen in HTML5 zu ellipsisieren?

Lesezeit: 5 Minuten

Benutzeravatar von unj2
unj2

Ich habe diese CSS hinzugefügt. Aber ich kann die Platzhalter/Wasserzeichen nicht mit Auslassungspunkten versehen. Sie haben jedoch die rote Schriftart.

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

Da ich für Mobilgeräte arbeite, möchte ich, dass es in Safari funktioniert.

  • Ihr CSS funktioniert für mich in Chrome/Firefox (Windows). In Safari funktioniert es nicht. jsfiddle.net/thirtydot/Gx5nX

    – dreißigdot

    11. Mai 2012 um 18:17 Uhr


  • Es hängt leider von der Safari-Version ab … das denke ich placeholder Styling wird derzeit nicht vollständig unterstützt …

    – ChristopheCVB

    11. Mai 2012 um 23:57

  • Wie @ChristopheCVB sagte, hängt es von der Version ab. Aus diesem Grund können Sie Standardtext und -klasse verwenden und JS verwenden, um den Text und die Klasse zu entfernen, wenn der Benutzer etwas eingibt.

    – Elchmann

    28. Dezember 2012 um 20:36 Uhr

  • Warum machen Sie das nicht in JavaScript? Ja, chaotischer, aber definitiv für Cross-Browser.

    Benutzer752723

    29. Dezember 2012 um 6:33

Manjunath Hadimanis Benutzeravatar
Manjunath Hadimani

Verwendung der :placeholder-shown Der Selektor funktioniert gut und stellt sicher, dass Texteingaben nicht ausgeblendet werden. Die Kompatibilität ist auch ziemlich solide.

input:placeholder-shown {
  text-overflow: ellipsis;
}
<input placeholder="A Long Placeholder to demonstrate"></input>

  • Willkommen bei Stack Overflow. Es sollten Snippets verwendet werden, wenn sie ausgeführt werden, um etwas zu demonstrieren. Es gibt keinen Beispiel-HTML-Code, an dem gearbeitet werden kann. Nur-Code-Antworten können fast immer durch das Hinzufügen von Erklärungen verbessert werden. Antworten auf ältere Fragen mit vorhandenen Antworten sollten erläutern, welchen neuen Aspekt der Frage sie ansprechen.

    – Jason Aller

    12. Mai 2020 um 23:44 Uhr

  • @JasonAller Wenn Sie genau lesen, handelt es sich tatsächlich um einen neuen Vorschlag und den einzigen, der für meinen Anwendungsfall tatsächlich funktioniert.

    – Kevin Beal

    20. August 2020 um 21:46 Uhr

  • Dies ist die einzige Antwort, die meiner Meinung nach unter Chrome 91 funktioniert. Die aktuelle Top-Antwort kann für keines der Codebeispiele Überlaufellipsen festlegen.

    – bsplosion

    6. Juni 2021 um 16:54

Benutzeravatar von DreamTeK
DreamTeK

JA


Methode 1

Wird weiterhin von allen Browsern unterstützt.

Überlauf-Auslassungspunkte eines Platzhalters können mithilfe des Attributselektors erreicht werden:

[placeholder]{
    text-overflow:ellipsis;
}

Dies hat auch den Nebeneffekt, dass in einigen Browsern Auslassungspunkte zum Eingabewert hinzugefügt werden. Dies kann erwünscht sein oder auch nicht.

[placeholder]{
    text-overflow:ellipsis;
}

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

Methode 2

Nicht länger unterstützt.

Ab Chrome und Edge V100+ ::placeholder Pseudoelementselektor unterstützt nicht die Textüberlaufeigenschaft.

::placeholder{
    text-overflow:ellipsis;
}

::placeholder{
    text-overflow:ellipsis;
}

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

WARUM?

Es scheint eine Verschärfung der Konformation gegenüber der Spezifikation zu sein:

Nur die Teilmenge der CSS-Eigenschaften, die für gelten ::first-line Pseudoelemente können in einer Regel verwendet werden ::placeholder in seinem Selektor.

  • Alle schriftbezogenen Eigenschaften: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretchUnd font-family.
  • Alle hintergrundbezogenen Eigenschaften: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachmentUnd background-blend-mode.
  • Der color Eigentum
  • word-spacing, letter-spacing, text-decoration, text-transformUnd line-height.
  • text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-styleUnd vertical-align.

ÄLTERE BROWSER

  • Benötigen Sie Unterstützung für ältere Browser?
  • IE spielt nicht gut?

Ich habe einen kleinen CSS-Hack erstellt, um einen Platzhalter zu simulieren. Verwenden Sie diesen Code, um Ihren Eingabeplatzhalter zu simulieren. Es ist ein wenig schmutzig, kann aber schon früher Unterstützung bieten 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>

Für die Unterstützung außerhalb dieses Bereichs wäre Javascript erforderlich.

  • Dies funktioniert nicht im IE. Müssen andere Stile festgelegt werden, damit dies im IE funktioniert und Ellipsen als Platzhalter angezeigt werden?

    – Ashok Gurram

    6. März 2017 um 6:53

  • @AshokGurram Haben Sie die zusätzlichen Präfixe ausprobiert, die meiner Antwort hinzugefügt wurden?

    – DreamTeK

    6. März 2017 um 8:49

  • Ich habe vor allem Präfixe ausprobiert. Keiner von ihnen arbeitete in der Branche.

    – Ashok Gurram

    6. März 2017 um 9:28

  • @AshokGurram Entschuldigung dafür. Ellipsis wird bei Eingaben in älteren IE-Versionen nicht unterstützt. Damit es funktioniert, ist ein kleiner Hack oder Javascript erforderlich. Ich hasse es, mich vom IE schlagen zu lassen, also habe ich den Code erstellt, den ich meiner Antwort hinzugefügt habe. Ich hoffe, es hilft.

    – DreamTeK

    6. März 2017 um 13:03 Uhr

  • Vorsichtig mit [placeholder] Sie formatieren die Eingabe selbst, nicht den Platzhalter. Bitte korrigieren Sie Ihre Antwort! jsfiddle.net/uW2cU/98

    – HaNdTriX

    31. Januar 2018 um 13:33 Uhr


Um möglichst viele Browser abzudecken, versuchen Sie Folgendes:

[placeholder]{
    text-overflow:ellipsis;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    text-overflow:ellipsis;
}
::-moz-placeholder { /* Firefox 19+ */
    text-overflow:ellipsis;
}
:-ms-input-placeholder { /* IE 10+ */
    text-overflow:ellipsis;
}
:-moz-placeholder { /* Firefox 18- */
    text-overflow:ellipsis;
}

  • Bitte fügen Sie !mportant in Chrome hinzu, da der Platzhalter standardmäßig text-overflow: clip;

    Text eingeben…

    – Srdjan Dejanovic

    7. Juni 2018 um 11:42

Entsprechend der Spezifikation, text-overflow Gilt nur für Blockcontainer wie div Und P Stichworte. Und da Eingaben keine Container sind, können Sie diese CSS-Regel nicht anwenden.

Nur input { text-overflow: ellipsis; } ohne Platzhalter-Pseudos hat den Zweck erfüllt.

  • Das dürfte im Jahr 2022 die richtige Antwort sein.

    – Marcio Duarte

    26. April 2022 um 23:14 Uhr

  • Dies wird bei einem Platzhalterüberlauf niemals funktionieren.

    – frustrierter Entwickler

    18. Juli 2022 um 3:59

  • Das dürfte im Jahr 2022 die richtige Antwort sein.

    – Marcio Duarte

    26. April 2022 um 23:14 Uhr

  • Dies wird bei einem Platzhalterüberlauf niemals funktionieren.

    – frustrierter Entwickler

    18. Juli 2022 um 3:59

1452650cookie-checkIst es möglich, Platzhalter/Wasserzeichen in HTML5 zu ellipsisieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy