Ändern der Schriftgröße von dynamisch hinzugefügten Elementen

Ich habe eine mit einer festen Breite/Höhe, zu der ich Elemente dynamisch hinzufügen möchte. Was versucht wird, ist, dass die Schriftart dieser hinzugefügten Elemente abnimmt, je mehr es gibt, da es einen Punkt geben wird, den sie nicht auf das Elternelement passen.Ändern der Schriftgröße von dynamisch hinzugefügten Elementen

konnte ich die Schrift Maßstab machen, wenn ich das Browserfenster skalieren ... aber das ist nicht der Plan :)

Ist dies überhaupt möglich ist, was auch immer Mittel (css/js/jquery)?

Sehen Sie dieses jsfiddle Beispiel: https://jsfiddle.net/qzt0wkyd/

Beispielcode:

.bottom { 
 
    background-color: #fff; 
 
    text-align: center; 
 
    margin: 0px auto; 
 
    padding: 10px 5px 5px 5px; 
 
    margin-top: 5px; 
 
    width: 420px; 
 
    height: 150px; 
 
    border: solid #ff9400; 
 
    border-radius: 10px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    box-shadow: inset 0 0 10px #000000; 
 
} 
 

 
.aside3 { 
 
    color: #FFB894; 
 
    background-color: #666; 
 
    font-size: 1.5em; 
 
    margin-top: -11px; 
 
    margin-left: -8px; 
 
    width: 103%; 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
    text-shadow: 1px 1px 1px #111, -1px -1px 1px #999, 1px -1px 1px #111, -1px 1px 1px #999; 
 
} 
 

 
.linksites { 
 
    display: inline-flex; 
 
    float: center; 
 
    text-align: justify; 
 
    font-weight: bold; 
 
    color: orange; 
 
    letter-spacing: .15em; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    text-rendering: optimizeLegibility; 
 
    transition: 2s ease; 
 
    -webkit-transition: 2s ease; 
 
    -moz-transition: 2s ease; 
 
    text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474 
 
} 
 

 
.linksites:hover { 
 
    text-decoration: none; 
 
    font-size: 2.5vwx; 
 
    -webkit-transform: scale(1.1, 1.1); 
 
    -moz-transform: scale(1.1, 1.1); 
 
    -ms-transform: scale(1.1, 1.1); 
 
}

<div class="bottom"> 
 
    <p class="aside3">CONTACTS</p> 
 
    <div class="bottom-inner"> 
 

 

 
    <!--ALL DYNAMICALLY INSERTED <a> TAGS COULD BE MORE OR LESS OR ADDED AND REMOVED--> 
 
    <a class="linksites" href="mailto:[email protected]">Mail1&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail2&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail3&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail4&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail5&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail6&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail1&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail2&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail3&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail4&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail5&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail6&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail1&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail2&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail3&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail4&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail5&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail6&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail1&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail2&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail3&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail4&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail5&nbsp;&nbsp;</a> 
 
    <a class="linksites" href="mailto:[email protected]">Mail6&nbsp;&nbsp;</a> 
 

 

 
    </div> 
 
</div>

In diesem Beispiel i eine Reihe von Verbindungen, die in der übergeordneten div fit nicht, wie, wenn möglich, wenn ich mehr hinzufüge, werden sie herunterskalieren oder wenn ich einige entferne, skalieren sie alle für das div. (Ich habe den font-size zurück zu fester px, nachdem ich mit em experimentiert rem und Konsorten)

Vielen Dank im Voraus

Quelle

2017-07-04 Alejandro Suarez

Schauen Sie sich diese beiden Fragen [Skalieren von Text passen div] (https einstellen könnte : //stackoverflow.com/ques tions/4165836/javascript-scale-text-to-fit-in-fixed-div) und [Dynamische Textgröße] (https://stackoverflow.com/questions/5358183/is-it-possible-to-dynamically-scale -text-size-based-on-browser-width) – Greevman

Sie können die Schriftgröße ändern oder die div-Größe ändern, was Sie wollen? – Bhargav

@Greevman gut lesen auf GetComputedStyle in der Tat danke dafür. Prost –

jQuery verwenden Sie können auf die Menge der Elemente dynamisch Acording CSS-Werte ändern Sie haben so etwas wie dieses

if ($('a.linksites').length>9 && $('a.linksites').length<13) { 
    $('.linksites').css('font-size','20px') 
}

tun Sie verschiedene Schriftgrößen für unterschiedliche Mengen an linksites durch Verkettung verschiedener wenn Aussagen wie die oben

Quelle

2017-07-04 19:16:01 natral

Schöne Lösung versuchte es und arbeitete, wenn ich die Menge der Elemente, die sein werden und was ihre erforderliche Größe sein wird, berechnen. Denken Sie daran, dass die Liste der Tags mit JavaScript eingefügt wird und dynamisch hinzugefügt/entfernt werden kann. Ich habe keine Möglichkeit zu wissen, wann sich die Tags geändert haben, wenn ich sie nicht visuell überfliegen sehe. Ich denke, es könnte eine Möglichkeit geben, die Größe des Textes auf den a-Tags dynamisch anzupassen, wenn sie hinzugefügt/entfernt werden, um im div zu bleiben, ohne zu überlaufen. Vielleicht nicht dynamisch möglich :( –

@alejandro Wenn der Raum, in dem die Tags gespeichert werden, fest ist und Sie die für die Anzahl der Tags erforderliche Schriftgröße vorberechnet haben, können Sie die obige Bedingung in aufrufen Das Skript, das Tags zum/vom div hinzufügt/löscht. – natral

Was ist, wenn ich die Anzahl der Tags nicht a scripts die Tags aus einer Datenbank greift, so kann die Menge wachsen oder reduzieren so richtig das div mit den Tags hat feste Größe aber Menge von Tags sind bekannt, ich habe so viele auf ahow gepostet, wie sie das div überlaufen, anstatt die Textgröße zu reduzieren. –

Ändern der Schriftgröße von dynamisch hinzugefügten Elementen

Antwort

Verwandte Themen