Ich weiß nicht, warum dieses einfache CSS nicht funktioniert ...
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}
<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>
Sollte um den 4. "Test" abschneiden
FF only
- Wenn diesefilter
Option angewendet wird, werden keine Auslassungspunkte gerendert. Fehler geöffnettext-overflow
: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflowAntworten:
text-overflow:ellipsis;
funktioniert nur, wenn Folgendes zutrifft:px
(Pixel) beschränkt sein. Die Breite in%
(Prozent) funktioniert nicht.overflow:hidden
und habenwhite-space:nowrap
setzen.Der Grund, warum Sie hier Probleme haben, ist, dass das
width
Ihresa
Elements nicht eingeschränkt ist. Du hast einewidth
Einstellung, aber weil das Element auf eingestellt istdisplay:inline
(dh die Standardeinstellung) festgelegt ist, wird es ignoriert, und nichts anderes schränkt seine Breite ein.Sie können dies beheben, indem Sie einen der folgenden Schritte ausführen:
display:inline-block
oderdisplay:block
(wahrscheinlich das erstere, hängt jedoch von Ihren Layoutanforderungen ab).display:block
und geben Sie diesem Element ein festeswidth
odermax-width
.float:left
oderfloat:right
(wahrscheinlich das erstere, aber auch hier sollte beides den gleichen Effekt haben, was die Auslassungspunkte betrifft).Ich würde vorschlagen
display:inline-block
, da dies die minimale Auswirkung auf die Sicherheit Ihres Layouts hat. es funktioniert sehr ähnlich wie dasdisplay:inline
, was es derzeit verwendet, was das Layout betrifft, aber Sie können auch mit den anderen Punkten experimentieren. Ich habe versucht, so viele Informationen wie möglich zu geben, damit Sie verstehen, wie diese Dinge miteinander interagieren. Ein großer Teil des Verständnisses von CSS besteht darin, zu verstehen, wie verschiedene Stile zusammenarbeiten.Hier ist ein Ausschnitt mit Ihrem Code und einem
display:inline-block
hinzugefügten, um zu zeigen, wie nahe Sie waren.Nützliche Referenzen:
quelle
white-space: nowrap
ist eigentlich nicht nötig. Wir können die Ellipsen auch ohne sie noch sehen. Für mehrere Zeilentext-overflow
sehen Sie diese SOwhite-space: nowrap
ist jedoch erforderlich.width
. Alles was Sie tun müssen, ist a einzustellenwhite-space: nowrap;
und es funktioniert einwandfrei.Die akzeptierte Antwort ist fantastisch. Sie können jedoch weiterhin die
%
Breite verwenden und erreichentext-overflow: ellipsis
. Die Lösung ist einfach:Es scheint, dass bei jeder Verwendung
calc
der Endwert in absoluten Pixeln gerendert wird, was sich folglich80%
in so etwas umwandelt800px
für einen1000px
Container mit breiter Breite konvertiert wird. Daher kann anstelle der Verwendungwidth: [YOUR PERCENT]%
, Verwendungwidth: calc([YOUR PERCENT]%)
.quelle
Wenn Sie diese Frage erreichen, weil Sie Probleme haben, die Auslassungspunkte in einem
display: flex
Container zum Laufen zu bringen , fügen Sie sie hinzumin-width: 0
, die Auslassungspunkte zum Laufen den äußersten Container hinzu, der übergeordnet ist, obwohl Sie bereits einen festgelegt habenoverflow: hidden
, und sehen Sie, wie dies für Sie funktioniert.Weitere Details und ein funktionierendes Beispiel zu diesem Codepen von Aj -Foster . Hat den Trick in meinem Fall total geschafft.
quelle
position: sticky
Element in einemdisplay: flex
Container funktioniert .Stellen Sie außerdem sicher
word-wrap
, dass IE10 und niedriger auf normal eingestellt sind.Die unten genannten Standards definieren das Verhalten dieser Eigenschaft als abhängig von der Einstellung der Eigenschaft "Textumbruch". Die WordWrap-Einstellungen sind in Windows Internet Explorer jedoch immer wirksam, da Internet Explorer die Eigenschaft "Textumbruch" nicht unterstützt.
Daher wurde in meinem Fall
word-wrap
auf Break-Word (geerbt oder standardmäßig?) Verursachttext-overflow
zu Arbeit in FF und Chrome, aber nicht im Internet Explorer.MS-Informationen zur Zeilenumbruch-Eigenschaft
quelle
anchor
,span
... Tags sind standardmäßig Inline-Elemente . Bei Inline-Elementenwidth
funktioniert die Eigenschaft nicht. Sie müssen Ihr Element also entwederinline-block
oder inblock level
Elemente konvertierenquelle
Fügen Sie die vier Zeilen ein, die nach den Informationen geschrieben wurden, damit die Auslassungspunkte funktionieren
quelle
Fügen Sie
display: block;
oderdisplay: inline-block;
zu Ihrem hinzu#User_Apps_Content .DLD_App a
Demo
quelle
Sie fügen nur eine Zeile CSS hinzu:
quelle
In Bootstrap 4 können Sie eine
.text-truncate
Klasse hinzufügen , um den Text mit einem Auslassungszeichen abzuschneiden.quelle
Muss enthalten
Darf NICHT enthalten
Sollte beinhalten
quelle
Sie können auch float hinzufügen: left; innerhalb dieser Klasse #User_Apps_Content .DLD_App a
quelle
Ich musste einige lange Ellipsenbeschreibungen machen (nur eine Spur nehmen), während ich reagierte, also bestand meine Lösung darin, den Text umbrechen zu lassen (anstelle von
white-space: nowrap
) und anstelle einer festen Breite eine feste Höhe hinzuzufügen:quelle
Dies ist der Code, der Folgendes ermöglicht:
Überlauf: versteckt ist erforderlich
quelle
Ich hatte das gleiche Problem und es scheint, dass keine der oben genannten Lösungen für Safari funktioniert. Für Nicht-Safari-Browser funktioniert dies einwandfrei:
Für Safari ist dies derjenige, der für mich funktioniert. Beachten Sie, dass sich die Medienabfrage zur Überprüfung, ob der Browser Safari ist, im Laufe der Zeit ändern kann. Basteln Sie also einfach an der Medienabfrage, wenn sie für Sie nicht funktioniert. Mit
line-clamp
property wäre es auch möglich, mehrere Zeilen mit Auslassungspunkten im Web zu haben, siehe hier .quelle
https://stackoverflow.com/a/53784508/5626747
Kann aufgrund des guten Rufs keinen Kommentar abgeben, daher mache ich eine andere Antwort:
In diesem Fall müssen Sie auch die allgemein vorgeschlagene
display: block;
Eigenschaft aus dem Element entfernen, auf das Sie gesetzt habentext-overflow: ellipsis;
, oder sie wird ohne das ... am Ende abgeschnitten.quelle
quelle