我有一个具有固定宽度/高度的 ,我打算向其动态添加元素。我正在尝试的是让那些添加的元素的字体减少,因为会有一个点不适合父元素。
如果我缩放浏览器窗口,我就能够进行字体缩放...但这不是计划:)
这是否可能,不管是什么方式(css/js/jquery)?
请参阅此 jsfiddle 示例:https://jsfiddle.net/qzt0wkyd/
示例代码:
.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:sample@mail">Mail1 </a>
<a class="linksites" href="mailto:sample@mail">Mail2 </a>
<a class="linksites" href="mailto:sample@mail">Mail3 </a>
<a class="linksites" href="mailto:sample@mail">Mail4 </a>
<a class="linksites" href="mailto:sample@mail">Mail5 </a>
<a class="linksites" href="mailto:sample@mail">Mail6 </a>
<a class="linksites" href="mailto:sample@mail">Mail1 </a>
<a class="linksites" href="mailto:sample@mail">Mail2 </a>
<a class="linksites" href="mailto:sample@mail">Mail3 </a>
<a class="linksites" href="mailto:sample@mail">Mail4 </a>
<a class="linksites" href="mailto:sample@mail">Mail5 </a>
<a class="linksites" href="mailto:sample@mail">Mail6 </a>
<a class="linksites" href="mailto:sample@mail">Mail1 </a>
<a class="linksites" href="mailto:sample@mail">Mail2 </a>
<a class="linksites" href="mailto:sample@mail">Mail3 </a>
<a class="linksites" href="mailto:sample@mail">Mail4 </a>
<a class="linksites" href="mailto:sample@mail">Mail5 </a>
<a class="linksites" href="mailto:sample@mail">Mail6 </a>
<a class="linksites" href="mailto:sample@mail">Mail1 </a>
<a class="linksites" href="mailto:sample@mail">Mail2 </a>
<a class="linksites" href="mailto:sample@mail">Mail3 </a>
<a class="linksites" href="mailto:sample@mail">Mail4 </a>
<a class="linksites" href="mailto:sample@mail">Mail5 </a>
<a class="linksites" href="mailto:sample@mail">Mail6 </a>
</div>
</div>
在那个例子中,我有一堆不适合父 div 的链接,如果可能的话,如果我添加更多,它们会缩小,或者如果我删除一些,它们会全部放大到 div。 (在我尝试使用 em、rem 等之后,我将字体大小设置回固定 px)
提前致谢
最佳答案
使用 jQuery,您可以根据您拥有的元素数量动态更改 css 值
if ($('a.linksites').length>9 && $('a.linksites').length<13) {
$('.linksites').css('font-size','20px')
}
你可以通过像上面那样连接各种 if 语句来为不同数量的链接站点设置不同的字体大小
关于javascript - 更改动态添加元素的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44912610/