it-swarm.com.de

SPAN-Überlauf ausblenden

Ich versuche, ein Widget für eine Combobox-Stil (Jquery-Ui-kompatibel) zu erstellen, und zurzeit versuche ich, das statische Layout der Box zu sortieren. Das Problem ist, wenn ich langen Text im Wertebereich der Auswahl habe, wird sie nicht in Firefox geklippt (sie wird tatsächlich umbrochen). Ich möchte das nicht und habe verschiedene Kombinationen ausprobiert: versteckte Leerzeichen: Nowrap usw., aber in Firefox wird es immer noch umbrochen. Der Beispielcode ist unten.

<a href="#" class="ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style="padding-left:5px;text-decoration: none; width: 139px; ">
    <span style="float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class="ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span>
    <span style="line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span>
</a>

Kann jemand dazu Hilfe anbieten?

23
James Hughes

Geben Sie dem Element einen display:block oder ändern Sie die SPAN in ein Blockelement wie DIV.

30
Aron Rotteveel

Das Problem ist, dass Spannweiten Inline-Elemente sind und Sie können für Inline-Elemente keine Breite oder Höhe festlegen. 

Und da Überlaufsteuerelemente auf Blockabmessungen basieren, funktioniert dies nicht. 

Ab Firefox 3.0 gibt es jedoch Unterstützung für 

  display: inline-block

Damit können Sie das Element so steuern, als ob es were a wäre, aber für den enthaltenden Bereich verhält es sich immer noch wie ein Inline-Element. 

14
Kent Fredric

Überprüfen Sie die Overflow-Wrap-Eigenschaft "css":

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

0
ufukomer