Reines CSS für die Anpassung der Schriftgröße an die dynamische Zeichenanzahl

Question

Ich weiß, dass dies ziemlich einfach mit Javascript gelöst werden könnte, aber ich bin nur an einer reinen CSS-Lösung interessiert.

Ich möchte einen Weg, um dynamisch die Größe von Text, so dass es immer in einem festen div passt. Hier ist das Beispiel Markup:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

Ich dachte, dass vielleicht dies möglich sein könnte, indem Sie die Breite des Containers in ems, und immer die Schriftgröße, um diesen Wert zu erben?

Answer 1

Hinweis: Diese Lösung hängt von der Größe des Ansichtsfensters und nicht von der Menge des Inhalts ab.

Ich habe gerade herausgefunden, dass dies mit VW-Geräten möglich ist. Sie sind die Einheiten, die mit der Einstellung der Ansichtsfensterbreite verbunden sind. Es gibt einige Nachteile, wie das Fehlen von Legacy-Browser-Unterstützung, aber das ist definitiv etwas, das man ernsthaft in Betracht ziehen sollte. Plus Sie können immer noch Fallbacks für ältere Browser wie so bieten:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ et https://medium.com/design-ux/66bddb327bb1

Answer 2

編集する： Achten Sie auf attr() Sie bezieht sich auf calc() in css. Vielleicht können Sie es in Zukunft erreichen.

Leider gibt es im Moment keine reine css-Lösung. Ich schlage Ihnen Folgendes vor. Geben Sie Ihrem Element ein title-Attribut. Und verwenden Sie text-overflow ellipsis zu verhindern, dass Bruch des Designs und lassen Sie Benutzer wissen, mehr Text gibt es.

<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
 Some sample dynamic amount of text here
</div>

.

.

.

Alternativ dazu Wenn Sie nur die Größe auf der Grundlage des Ansichtsfensters reduzieren möchten. CSS3 unterstützt neue Dimensionen, die relativ zum Ansichtsfenster sind.

body {
   font-size: 3.2vw;
}

1. 3.2vw = 3.2% der Breite des Ansichtsfensters
2. 3.2vh = 3.2% der Höhe des Ansichtsfensters
3. 3,2vmin = der kleinere Wert von 3,2vw oder 3,2vh
4. 3.2vmax = Größer von 3.2vw oder 3.2vh siehe css-tricks.com/.... und sehen Sie sich auch caniuse.com/....

Answer 3

Sie könnten sich für die calc Ansatz:

font-size: calc(4vw + 4vh + 2vmin);

erledigt. Ändern Sie die Werte, bis sie Ihrem Geschmack entsprechen.

Fuente: https://codepen.io/CrocoDillon/pen/fBJxu

Answer 4

Die einzige Möglichkeit wäre wahrscheinlich, unterschiedliche Breiten für verschiedene Bildschirmgrößen einzustellen, aber dieser Ansatz ist ziemlich ungenau und Sie sollten eine js-Lösung verwenden.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

Answer 5

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

diese Gleichung verwenden.

Für alles, was größer oder kleiner als 1440 und 768 ist, können Sie entweder einen statischen Wert angeben oder denselben Ansatz anwenden.

Der Nachteil mit vw Lösung ist, dass Sie nicht ein Skalierungsverhältnis, sagen wir eine 5vw bei Bildschirmauflösung 1440 Mai endete als 60px Schriftgröße, Ihre Idee Schriftgröße, aber wenn Sie schrumpfen die Fensterbreite auf 768, kann es endete als 12px, nicht die minimale Sie wollen. Mit diesem Ansatz können Sie Ihre obere und untere Grenze setzen, und die Schrift wird sich dazwischen skalieren.