it-swarm.com.de

Zeigen Sie dynamischen Text elegant in einem Bereich mit fester Breite und Höhe an

Dies mag eine unmöglich zu beantwortende Frage sein, aber ich werde sie trotzdem veröffentlichen.

Grundsätzlich ist dies eine elegante Möglichkeit, dynamischen Text in einem Bereich mit fester Breite zu verarbeiten.

Sehen Sie sich das folgende Beispiel an ... wie würden Sie den gesamten Text anzeigen, ohne die Grenzen der weißen Box zu überschreiten? Beachten Sie auch, dass dies ein Element auf einer Seite mit vielen gleichen Elementen ist. Eine variable Höhe ist daher keine Option, da dies das Layout des restlichen Teils der Seite verschieben würde.

enter image description here

Bisher habe ich überlegt:

  1. Begrenzen Sie die Anzahl der Zeichen und schneiden Sie sie einfach mit ab ....
  2. Schneiden Sie den Text ab, verwenden Sie jedoch ein Titel-Tag, das beim Mouseover den vollständigen Text anzeigt
  3. Lassen Sie sich in eine zweite Zeile fallen und erzwingen Sie eine Unterbrechung in dieser Zeile, damit die Elemente in der unteren Zeile ausgerichtet werden
  4. Platzieren Sie den Text innerhalb des Bildes auf einem verschiebbaren Teil, der beim Mouseover sichtbar ist
  5. Scrollender Text (ja, ich bin sogar dorthin gegangen ...)
  6. Bildlaufleiste ... für 1 Zeile? urgh ...

Ich wäre fasziniert von allen Gedanken, die die Leute da draußen dazu haben.

8
Doug McK

Das Schneiden des Textes mit einer Ellipse wäre auch meine erste Idee. Alternativ können Sie den Text im Hintergrund "verschwinden" lassen, indem Sie einen Transparenzverlauf darauf platzieren, d. H. So, dass der Text ausgeblendet wird. Es ist im Grunde die gleiche Idee, aber aus gestalterischer Sicht etwas eleganter. Das Hinzufügen eines Tooltips, der den vollständigen Text anzeigt, könnte ein guter Bonus sein.

Alle anderen Optionen werden Ihr Design vermasseln. Wenn Sie den Text in zwei Zeilen aufteilen, müssen Sie zusätzlichen vertikalen Raum vorsehen. Wenn Sie das Feld so vergrößern, dass der Text passt, müssen Sie zusätzlichen horizontalen Raum vorsehen. Wenn Sie die Schriftgröße verringern, wird sie unlesbar. Wenn Sie eine Bildlaufleiste verwenden, müssen Sie auch zusätzlichen vertikalen Raum vorhersehen, da dieser hässlich aussieht. Wenn Sie Bildlauftext verwenden, werden Sie erschossen.

Ps.: Wenn dieser Text oft recht lang ist, sollten Sie nicht großgeschriebenen Text verwenden. Es nimmt weniger Platz in Anspruch und ist leichter zu lesen.

6
Bart Gijssens

Ich würde nur sicherstellen, dass Sie eine sichere Höhe im Design haben und die Linien auf natürliche Weise brechen. Ich würde es nicht vorzeitig abschneiden, selbst wenn Sie das title-Attribut verwenden. Dazu müsste sichergestellt werden, dass der Benutzer weiß, dass er mit der Maus über den Text fahren kann, was den Text ziemlich gut hässlich machen könnte. Ich würde um jeden Preis Bildlaufleisten für einen so kleinen Bereich vermeiden, und das Verschieben von Text scheint nie gut zu funktionieren.

0
Bill Criswell