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.Gibt es einen CSS-Ansatz, um dynamische datengesteuerte Zeichen in die div-Schaltfläche einzufügen?
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
Warum Klotzen Sie die Taste nicht? –
erstellen Sie einfach zusätzliche Klasse für Klasse für datengesteuerte Schaltfläche – AlFra