Gibt es einen CSS-Ansatz, um dynamische datengesteuerte Zeichen in die div-Schaltfläche einzufügen?

Question

Ich bearbeite eine datengesteuerte Website, die Daten aus einer Automationsdatenbank-Engine verwendet. Innerhalb des HTML habe ich eine feste Größe Knopf und darin sind Texte, die von der Datenbank kommen. Ich möchte einige CSS-Stile hinzufügen, die die Größe der Schriftart so ändern, dass sie immer in die div-Schaltfläche passt.

Hier ist mein Code:

CSS:

.button { 
    width: 216px; 
    height: 44px; 
    background-color: 00baf2; 
    color: #fff; 
    border-radius: 5px; 
    font-size: 23px; 
    line-height: 45px; 
    font-weight: 500; 
    text-align: center; 

@media screen and (max-width : 768px) { 
    .button { 
     width: 400px; 
     height: 81px; 
     font-size: 30px; 
     line-height: 40px; 
     background-size: 400px 81px !important; 
     float: none !important; 
     clear: both; 
     margin: 25px auto; 
    } 

HTML

<div class="button">View Your Plan</div> (static/not data-driven) 
<div class="button">Current Members Click Here</div> (data-driven) 
<div class="button">Enroll Now</div> (static/not data-driven) 

Die zweite/mittlere Taste ist eine datengesteuerte Taste. Manchmal sind die Wörter länger als "Aktuelle Mitglieder klicken hier". Manchmal wird es "Sehen Sie Ihr Plan-Rabatt-Programm hier". Das Problem ist, wenn Sie die Schriftgröße und Zeilenhöhe herausnehmen, wird es die Schriftgröße voreinstellen, die es klein macht. Wie behebe ich das, damit der dynamische Text immer in die div-Schaltfläche passt, egal ob kurz oder lang? Kann es nur mit CSS gemacht werden oder gibt es eine JS-Lösung? Hier

ist, was es sieht aus wie jetzt: Desktop-Ansicht Mobile Ansicht

Ziel: Desktop- Mobil

Answer 1

Was sind Sie nach ist eine dynamische Schrift Größe, die skaliert, um zu passen, und Sie können das nicht nur mit CSS tun. Sie können unterschiedliche Klassen bedingt anwenden, die sich auf die Schriftgröße auswirken könnten. Zum Beispiel:

.button.small-text { 
    font-size:12px; 
} 
.button.medium-text { 
    font-size:18px; 
} 
.button.large-text { 
    font-size:23px; 
} 

Sie müßten diese in Ihren Medien-Anfragen neu zu definieren, um die verschiedenen Schaltfläche Breiten passen.

Dann müssen Sie entweder Backend oder Frontend-Skript verwenden, um small-text, medium-text oder large-text gelten.

Mit jQuery könnte dies wie folgt aussehen:

$('.button').removeClass('small-text medium-text large-text'); 
$('.button').each(function() { 
    var len = $(this).text().length; 
    if (len < 20) { 
     $(this).addClass('large-text'); 
    } else if (len < 40) { 
     $(this).addClass('medium-text'); 
    } else { 
     $(this).addClass('small-text'); 
    } 
}); 

Answer 2

Alles, was Sie tun müssen, ist die height auf die Schaltfläche zu entfernen, um es dynamischer zu machen. Die Schaltfläche wird also größer, wenn der Text größer wird. Fügen Sie der Schaltflächenklasse display:inline-block hinzu.

Wenn Sie die Schaltfläche mit fester/konstanter Höhe erstellen müssen, verwenden Sie einen % Wert in der Schriftgröße der Schaltfläche. wie font-size:10%; als % bezeichnet einen relativen Wert, den Sie verwenden könnten.

Answer 3

EDIT:

Ich habe gerade gelesen Kommentar, die Sie, dass datengesteuerte Taste eine kleinere Schrift als die anderen haben wollen. Geben Sie es einfach in der Klasse an, die ich für diese Schaltfläche verwendet habe, und legen Sie einen kleineren Wert in Ihrer Schriftgröße fest.

Dies ist möglich mit VW-Einheiten, Sie müssen jedoch ältere Browser mit einem Fallback unterstützen.Ich weiß nicht, ob das in größeren Desktops bricht, aber hoffentlich können Sie sich ein Bild von diesem Ansatz machen.

.button { 
 
    width: 216px; 
 
    min-height: 44px; 
 
    background-color: #00baf2; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    font-size: 23px; 
 
    font-size: 2vw; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    line-height: 44px; 
 
    } 
 
    .button.data-driven { 
 
    line-height: 22px; 
 
    } 
 
    @media (max-width: 992px) and (min-width: 768px) { 
 
    .button { 
 
     font-size: 23px; 
 
     font-size: 2vw; 
 
    } 
 
    .button.data-driven { 
 
     line-height: initial; 
 
    } 
 
    } 
 
    @media screen and (max-width: 768px) { 
 
    .button { 
 
     width: 400px; 
 
     height: 81px; 
 
     font-size: 30px; 
 
     line-height: 81px; 
 
     background-size: 400px 81px !important; 
 
     float: none !important; 
 
     clear: both; 
 
     margin: 25px auto; 
 
     padding-top: 0; 
 
    } 
 
    .button.data-driven { 
 
     line-height: 81px; 
 
    } 
 
    }

<div class="button">View Your Plan</div>(static/not data-driven) 
 
<div class="button data-driven">Current Members Click Here</div>(data-driven) 
 
<div class="button">Enroll Now</div>(static/not data-driven)