NgbTooltip position in Eckigen Anwendung

In meinem Angular 2/4 Anwendung, die ich verwenden ng-bootstrap und seine Komponente NgbTooltip.

Übernehmen die folgenden HTML snippet

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
    A very long text that does not fit
</div>

mit bestimmten custom CSS

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

Ich bin nicht zufrieden mit meiner Umsetzung noch nicht, vielleicht kann jemand mir helfen, eine elegante Lösung zu meinem problem:

Davon ausgehen, der text paßt nicht auf die div, dann wird es abgeschnitten und einem angehängten "..." wie erwartet, und die QuickInfo zeigt auf der Oberseite in der Mitte der div. Das ist gut für diesen Fall, aber bei sehr kurzen Inhalt, es sieht hässlich:

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'1.jpg'" 
     placement="top" 
     container="body">
    1.jpg
</div>

NgbTooltip position in Eckigen Anwendung

Nun der tooltip zeigt noch oben in der Mitte des div, aber auf der rechten Seite der text (weil es so kurz ist aber die div noch die volle Breite).

Dachte ich, ich könnte einfach lösen dieses Problem durch die Verwendung eines span element, und legen Sie die QuickInfo an, die anstelle der div:

<div class="col-sm-8 text-ellipsis">
    <span  
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
        A very long text that does not fit
    </span>
</div>

Aber diese Problemumgehung wirft ein weiteres Problem, wie hier zu sehen:

NgbTooltip position in Eckigen Anwendung

Jetzt ist das problem das der span abgeschnitten wird, aber in der Tat breiter als die div. Der tooltip macht in der Mitte des span und nicht die div.

Jede "glatte" Idee wie man das schöner? Ich würde schätzen Ihre Eingabe eine Menge.

  • Hast du das so wie du es willst?
  • eigentlich noch nicht...
InformationsquelleAutor andreas | 2017-03-31
  1. 0

    Dies ist eine Allgemeine Antwort, aber check in Breite im Vergleich zu min-width-Einstellungen für die div. Auch, span ist ein inline-element und hat keine block-level-Eigenschaften wie Breite. Sie müssen entweder verwenden Sie ein anderes div oder Sie brauchen, um zu definieren die Zeitspanne als display:inline-block in der CSS.

    Für das äußere div, legen Sie eine min-width, wo Sie möchten, die Schaltfläche mit den Auslassungszeichen, um zu starten, die (sagen wir bei etwa 150px). Entfernen Sie die text-Ellipse-Klasse von dem div und legte es auf den span. Für das span-element, fügen Sie eine Breite von 100% und machen es zu einem inline-block (oder einfach ein weiteres div)

    Also, im Grunde, Sie am Ende mit etwas wie dieses (ich habe die min-width:150px inline, aber das wäre natürlich besser in den style sheet):

    <style>
    .text-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
    }
</style>

<div class="col-sm-8" style="min-width: 150px">
    <div class="text-ellipsis" ngbTooltip="A very long text that does not fit" placement="top" container="body">
        A very long text that does not fit A very long text that does not fit A very long text that does not fitA very long text that does not fit A very long text that does not fit
    </div>
</div>
    InformationsquelleAutor Doug
Schreibe einen Kommentar