Auslassungspunkte für Überlauftext in Dropdown-Feldern

Ich behebe die Breite eines meiner Dropdown-Felder (ja, ich weiß, dass es dabei browserübergreifende Probleme gibt).

Gibt es eine Möglichkeit, überlaufenden Text abzuschneiden und Ellipsen anzuhängen? Textüberlauf: Auslassungspunkte funktionieren nicht für <select>Elemente (zumindest in Chrome).

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

Beispiel hier: http://jsfiddle.net/t5eUe/

HINWEIS: Funktioniert ab Juli 2020 text-overflow: ellipsisfür <select>Chrome

HTML ist in den Angaben für Formularsteuerelemente begrenzt. Dies lässt den Betriebssystem- und Browserherstellern Raum, das zu tun, was sie auf dieser Plattform für angemessen halten (wie das iPhone-Modal, selectdas im geöffneten Zustand völlig anders aussieht als das herkömmliche Popup-Menü).

Wenn es Sie stört, können Sie einen anpassbaren Ersatz wie Chosen verwenden , der sich vom nativen unterscheidet select.

Oder melden Sie einen Fehler bei einem wichtigen Betriebssystem oder Browser. Nach allem, was wir wissen, könnte die Art und Weise, wie Text in selects abgeschnitten wird , das Ergebnis eines jahrelangen Versehens sein, das jeder kopiert hat, und es könnte Zeit für eine Änderung sein.

Wenn Sie diese Frage finden, weil Sie einen benutzerdefinierten Pfeil in Ihrem Auswahlfeld haben und der Text über Ihren Pfeil geht, habe ich eine Lösung gefunden, die in einigen Browsern funktioniert. Fügen Sie einfach etwas Polsterung selectauf der rechten Seite hinzu.

Vor:

Nach:

CSS:

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS ignoriert die paddingEigenschaften, verwendet jedoch -webkit-stattdessen die Eigenschaften.

http://jsfiddle.net/T7ST2/4/

Die einfachste Lösung könnte darin bestehen, die Anzahl der Zeichen im HTML-Code selbst zu begrenzen. Rails hat einen Helfer zum Abschneiden (Zeichenfolge, Länge) , und ich bin sicher, dass das von Ihnen verwendete Backend etwas Ähnliches bietet.

Aufgrund der browserübergreifenden Probleme, mit denen Sie bereits in Bezug auf die Breite der Auswahlfelder vertraut sind, scheint mir dies die einfachste und am wenigsten fehleranfällige Option zu sein.

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

Sie können dies verwenden:

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
select option {
    width:100px;
    text-overflow:ellipsis;
    overflow:hidden;
}
div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

Fand diesen absoluten Hack, der eigentlich ganz gut funktioniert:

https://codepen.io/nikitahl/pen/vyZbwR

Nicht nur CSS.

In .select-containerdiesem Fall ist es wichtig, einen Container in der Dropdown-Liste zu haben . Dieser Container ist so ::beforeeingerichtet, dass er contentbasierend auf seinem data-contentAttribut / Datensatz zusammen mit allen overflow:hidden; text-overflow: ellipsis;erforderlichen Größen und Größen angezeigt wird, damit die Auslassungspunkte funktionieren.

Wenn sich die Auswahl ändert, weist Javascript den Wert (oder Sie können den Text der Option aus der select.optionsListe abrufen) dem Datensatzinhalt des Containers zu, und voila!

Kopieren Sie den Inhalt des Codepens hier:

var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";

selectContainer.dataset.content = select.value;

function handleChange(e) {
  selectContainer.dataset.content = e.currentTarget.value;
  console.log(select.value);
}

select.addEventListener("change", handleChange);

span {
  margin: 0 10px 0 0;
}

.select-container {
  position: relative;
  display: inline-block;
}

.select-container::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  padding: 7px;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;
  pointer-events: none;
}

.select {
  width: 80px;
  padding: 5px;
  appearance: none;
  background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
  background-size: 10px 10px;
  color: transparent;
}

.regular {
  display: inline-block;
  margin: 10px 0 0;
  .select {
    color: #000;
  }
}

<span>Hack:</span><div class="select-container" data-content="">
  <select class="select" id="words">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>
<br />

<span>Regular:</span>
<div class="regular">
  <select style="width: 80px;">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>

quirksmode enthält eine gute Beschreibung der Eigenschaft "Textüberlauf". Möglicherweise müssen Sie jedoch einige zusätzliche Eigenschaften wie "Leerraum: Nowrap" anwenden.

Obwohl ich nicht zu 100% weiß, wie sich dies in einem ausgewählten Objekt verhält, könnte es sich lohnen, dies zuerst zu versuchen:

http://www.quirksmode.org/css/textoverflow.html

CSS-Datei

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

JS-Datei

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});

Sie können diese jQuery-Funktion anstelle des Plus-Bootstrap-Tooltips verwenden

function DDLSToolTipping(ddlsArray) {
    $(ddlsArray).each(function (index, ddl) {
        DDLToolTipping(ddl)
    });
}

function DDLToolTipping(ddlID, maxLength, allowDots) {
    if (maxLength == null) { maxLength = 12 }
    if (allowDots == null) { allowDots = true }

    var selectedOption = $(ddlID).find('option:selected').text();

    if (selectedOption.length > maxLength) {
        $(ddlID).attr('data-toggle', "tooltip")
                .attr('title', selectedOption);

        if (allowDots) {
            $(ddlID).prev('sup').remove();
            $(ddlID).before(
            "<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
               )
        }
    }

    else if ($(ddlID).attr('title') != null) {
        $(ddlID).removeAttr('data-toggle')
                .removeAttr('title');
    }
}

Ich habe diesen Ansatz kürzlich in einem Projekt verwendet und war ziemlich zufrieden mit dem Ergebnis:

.select-wrapper {
    position: relative;
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        content: "";
        background: linear-gradient(to right, transparent, white);
        pointer-events: none;
    }
}

Wickeln Sie die Auswahl grundsätzlich in ein div ein und fügen Sie ein Pseudoelement ein, um das Ende des Textes zu überlagern und das Erscheinungsbild zu erzeugen, das der Text ausblendet.