代码之家 › 专栏 › 技术社区 › Flemming

如何将每行文本调整为相同的宽度-并适合div?

font-size css html javascript

Flemming · 技术社区 · 6 年前

.divtext {
  display: table;
  font-family: impact;
  font-size: 4vw;
}

<div id="container">
  <div class="divtext">THIS IS JUST AN</div>
  <div class="divtext">EXAMPLE</div>
  <div class="divtext">TO SHOW YOU WHAT</div>
  <div class="divtext">I WANT</div>
</div>

function changeSize(){
    var els = document.getElementsByClassName("divtext"),
    refWidth = els[0].clientWidth,
    refFontSize = parseFloat(window.getComputedStyle(els[0],null).getPropertyValue("font-size")),
    i = 1;
    while(!!els[i]){
      els[i].style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px";
      i++;
    }
}

$(window).resize(function(){
        changeSize();

});

... 可调整大小。

3 回复 | 直到 6 年前

Nitha 6 年前

您可以通过添加限制来改进window.resize事件。

https://jsfiddle.net/s8xL7d1p/

$(window).resize(function(){
  window.addEventListener('resize', function() {
      // only run if we're not throttled
    if (!throttled) {
      // actual callback action
      changeSize();
      // we're throttled!
      throttled = true;
      // set a timeout to un-throttle
      setTimeout(function() {
        throttled = false;
      }, delay);
    }  
  });  
});

请参考 http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

Devin 6 年前

display: table 摆脱闪烁。

tong_gong 6 年前

var els = document.getElementsByClassName("divtext")
var refWidth = els[0].clientWidth
var refFontSize = parseFloat(window.getComputedStyle(els[0], null).getPropertyValue("font-size"))
function changeSize() {
  i = 0
  while (!!els[i]) {  
    els[i].style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px";
    i++;
  }
}
window.resize = changeSize

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前