Text-overflow-ellipsis nicht mit einige benutzerdefinierte schriftart

Ich versuche momentan, um ein Textfeld zu verstecken, überfüllt von text. Es funktioniert gut, aber für einen Teil. Ich bin mit

text-overflow: ellipsis;

Diese sollten drei Punkte ("...") an der Stelle, wo mein text ist abgeschnitten, aber es nicht legen drei Punkte, sondern Sie stellen das Zeichen, welches aussieht wie drei Punkte (so genannte 'Ellipse').

Die schriftart, die ich derzeit benutze nicht dieses Zeichen, so zeigt es einige andere zufällige Zeichen anstelle von drei Punkten.

Hat jemand eine einfache Lösung (ohne javascript eingebunden bitte nur in CSS), während meine schriftart für den text ?

  • nur zur info... der name des Charakters ist kein Zufall, 'Ellipse'. Ich bin gespannt zu hören, Antworten auf diese Frage, wie auch-ich hatte zu greifen, um die änderung der schriftart für die Browser, die dieses problem hatte (Husten Husten IE).
  • Sie könnte verwenden Sie einen unicode-Bereich in einer @font-face-Deklaration, aber die Unterstützung ist sehr beschränkt.
  • Ja, danke, es funktioniert auf Chrome. Ich bin noch auf der Suche nach einer besseren Lösung, aber zumindest ist es ein Anfang, vielen Dank.
  • Können Sie ein Beispiel für uns zu sehen? Schön zu sehen, welche schriftart, die Sie verwenden usw.
  • das hilft mir wirklich so gut 😀
InformationsquelleAutor soenguy | 2015-02-18
  1. 5

    Vollständig imitieren die Funktionalität von text-overflow: ellipsis ohne JavaScript zu verwenden, während immer noch die vollständige browser-Unterstützung (text-overflow: "..." funktioniert nur in Firefox 9 in der Zeit von diesem post, und ist vollständig nicht verfügbar auf jedem anderen browser) ist extrem schwierig (wenn nicht unmöglich).

    Die einzige Lösung, die ich denken kann, ohne irgendwelche "hacks" ist zu Bearbeiten Sie Ihre font-Datei, erstellen einer unicode-Zeichen für die ... Auslassungszeichen-Charakter. Ich habe neben keine Erfahrung in diesem Bereich, aber hier ist ein link, der scheint ziemlich gut: http://sourceforge.net/projects/ttfedit/

    Hier ist etwas HTML-code, den ich habe:

    <div id="wrapoff">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula, augue id pretium euismod, nisi dolor sodales orci, non porttitor ligula velit ac lorem.
</div>

    Und einige CSS:

    #wrapoff {
  width: 200px;
  border: 2px solid blue;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
#wrapoff:after {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: white;
  padding: 0 5px;
}

    Dadurch wird ein pseudo-element auf der Oberseite des #wrapoff div, an der rechten oberen Ecke, so dass der Inhalt wie text-overflow: ellipsis. Der Nachteil dabei ist, dass die "Ellipse" zeigen immer da, unabhängig davon, ob die Inhalte tatsächlich reicht aus und überläuft. Dies kann nicht behoben werden, da es keine Möglichkeit gibt, die Verwendung von CSS, um herauszufinden, ob der text überläuft, von der Seite.

    Hier ein JSFiddle:

    http://jsfiddle.net/ysoxyuje/

    Ist die Grenze, um zeigen Sie die Größe des Elements selbst.

    InformationsquelleAutor Lucas - Better Coding Academy
  2. 1

    http://jsfiddle.net/cbppL/707/

    HTML

    <header>
<h1>Long text is so long oh my is long indeed</h1>
</header>

    CSS

    header {
border:1px solid red;
width:150px;
position:relative;
}

h1 {
   overflow:hidden;
    white-space:nowrap;
   /* -ms-text-overflow:ellipsis; */
    /* text-overflow:ellipsis; */
    width:150px;
    height:1.2em;
}
header:after{
    content:"...";
    position:absolute;
    top:0;
    right:0;
    background:#fff;
}
h1:hover {
    overflow:visible;
}

    Nicht eine sehr gute Lösung. Es wird davon abhängen, welche Art von hintergrund Sie haben. Hoffe, Dass Hilft!

    InformationsquelleAutor Asim K T
  3. 0

    Statt "Ellipse", Sie können tatsächlich geben Sie Ihren eigenen Satz von Zeichen zu bedeuten, dass der text überlaufen.

    Wenn Sie Ihre eigene schriftart hat, die den Zeitraum definiert, Sie sollten in der Lage sein, um Sie nur drei Zeiten, wie diesen:

    text-overflow: '...';

    Hier ein JSFiddle es in Aktion: http://jsfiddle.net/x5e6yv21/

    • Ich sehe nicht, die drei Punkte zeigt, so dass dies bei mir nicht funktioniert (Chrome 29)
    • Benutzerdefinierte Ellipse hat einen sehr schlechten support.
    InformationsquelleAutor Adam Dunn
  4. 0

    Stellen Sie sicher, Sie haben 

    white-space: nowrap;
overflow: hidden;

    mit Ihrem

    text-overflow: ellipsis;
    InformationsquelleAutor Brandon J Brotsky
  5. 0

    Aus, was ich verstehe Ihr problem ist, dass die schriftart, die Sie verwenden, Sie fehlt der Auslassungszeichen-Charakter.

    Schnell dieses Problem beheben könnten Sie diesen letzten Brief mit der ::last-letter pseudo-element-Selektor
    und ändern Sie die font-family - Eigenschaft auf eine andere schriftart, unterstützt Auslassungszeichen _

    • Ich bin eine schwierige Zeit der Suche nach etwas (wie browser-Unterstützung oder sogar ein offizielles spec) auf das pseudo-element. Können Sie einen link auf alle Informationen?
    • eigentlich gibt es keine CSS-Unterstützung noch zum letzten-Buchstaben-pseudoelement (auch wenn es schon eine Weile her, dass es beantragt wurde) ; aber es ist eine Coole JS Jquery-pluging das bedeutet: lettering.js ; Sie können auch überprüfen Sie mehr unter css-tricks.com/a-call-for-nth-everything dies ist, wo ich gelernt habe über Sie..
    InformationsquelleAutor maioman
  6. -1

    So, ich weiß, das ist nicht ideal, aber es ist ein work-around. Die CSS3-Spezifikation sagt, dass die Auslassungspunkte, müssen Ihre Stil aus dem container, die Sie sind in. Dieser funktioniert einwandfrei in allen Browsern außer dem IE8/9 was braucht es Auslassungszeichen Stil aus dem ersten Brief des Containers. Der work-around ist, schlage ich vor, um wickeln Sie den text in Ihre "übergelaufen" - Elemente mit inline-element, geben den äußeren container eine schriftart wo die Auslassungszeichen Zeichen ist definiert und geben die inline-element innerhalb Ihrer benutzerdefinierten schriftart. Es würde in etwa so Aussehen fiddle: http://jsfiddle.net/u9dudost/2/

    Wenn Sie brauchen, um hinzuzufügen, IE8/9-Unterstützung, fügen Sie den folgenden:

    div {
    white-space: nowrap;
}

div::before {
    font-family: 'Helvetica', sans-serif; /* Your custom font here. */
    content: ''; /* IE9 fix */
}
    InformationsquelleAutor Joshua Whitley
  7. -2

    Müssen Sie mit dem folgenden zusammen: 

    white-space: nowrap;
text-overflow: ellipsis;
    InformationsquelleAutor confile
Schreibe einen Kommentar