非CSS解决方案:容器内的文本长度重新调整字体大小

  作为参考,非 CSS 解决方案:

  下面是一些 JS,它根据容器内的文本长度重新调整字体大小。

  代码笔代码略有修改,但与下面的想法相同:

   function scaleFontSize(element) {

        var container = document.getElementById(element);
        // Reset font-size to 100% to begin
        container.style.fontSize = "100%";
        // Check if the text is wider than its container,
        // if so then reduce font-size
        if (container.scrollWidth > container.clientWidth) {
            container.style.fontSize = "70%";
        }

  对我来说,当用户在下拉列表中进行选择时,我调用此函数,然后我的菜单中的一个 div 被填充(这是我出现动态文本的地方)。

  scaleFontSize("my_container_div");

  此外css 字体,我还使用 CSS 省略号 (“…”) 来截断甚至更长文字也是css 字体,像这样:

   #my_container_div {

        width: 200px; /* width required for text-overflow to work */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

  所以,最终:

  您还可以探索使用 CSS 字母间距来使文本变窄,同时保持相同的字体大小。
  正如@DMTinter 帖子的评论中提到的那样,OP 正在询问字符更改的数量(“数量”)。他还询问了 CSS,但正如@Alexander 指出的那样,“仅使用 CSS 是不可能的”。据我所知,目前这似乎是正确的,所以人们想知道次优的事情似乎也是合乎逻辑的。

  我对此并不特别自豪,但它确实有效。似乎需要过多的代码来完成它。这是核心:

   function fitText(el){

      var text = el.text();
      var fsize = parseInt(el.css('font-size'));
      var measured = measureText(text, fsize);
      if (measured.width > el.width()){
        console.log('reducing');
        while(true){
          fsize = parseInt(el.css('font-size'));
          var m = measureText(text, fsize );
          if(m.width > el.width()){
            el.css('font-size', --fsize + 'px');
          }
          else{
            break;
          }
        }
      }
      else if (measured.width < el.width()){
        console.log('increasing');
        while(true){
          fsize = parseInt(el.css('font-size'));
          var m = measureText(text, fsize);
          if(m.width < el.width()-4){ // not sure why -4 is needed (often)
            el.css('font-size', ++fsize + 'px');
          }
          else{
            break;
          }
        }
      }

  这是一个 JS Bin:,css,js,控制台,输出

  请提出可能的改进建议(我对使用画布测量文本并不感兴趣……似乎开销太大(?))。

  感谢@Pete 的 measureText 功能:

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1639
0 评论
672

发表评论

!