javascript - 使用javascript制作动态字体大小以适应按钮

好吧，取决于。高度也固定吗？如果高度和宽度都是固定的，则必须通过 javascript 计算字体大小。

在大多数情况下，两个或三个if条件对于特定用例应该是绝对足够的。

function font_size_adjust () {

  // Grab the string
  var string = $('#button_text').text()

  // Get the length in characters of the string
  var string_size = string.length

  // Build variable to change attribute
  var font_size = 0

  // Define logic for resizing, adapt this to your personal needs
  if (string_size < 60) {
     fontsize = '2vw';
  } else if (string_size > 60) {
    fontsize = '4vw';
  } else {}

  // Change fontsize
  $('#button_text').css('font-size', fontsize)

}

// Call the function where- and whenever needed:
font_size_adjust();




// Example stuff
$('#toggle_small').click(function () {
  $('#button_text').text('Now I am small again!')
  font_size_adjust();
})

$('#toggle_big').click(function () {
  $('#button_text').text('Now I am large again! Lets get this rollin! rollin! rollin! rollin!')
  font_size_adjust();
})

#ctn {
  display: flex;
  float: left;
}

#button {
  width: 45vw;
  background-color: lightblue;
  padding: 10px;
  border-radius: 25px;
  margin-right: 1vw;
  font-family: Varela Round;
  color: #FFF;
    background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgba(101,34,162,1) 72%);
}

#ctn_toggle {
  display: flex;
  float: left;
}

.toggle {
  background-color: lightblue;
  font-size: 3vw;
  padding: 10px;
  border-radius: 25px;
  width: 11vw;
  text-align: center;
  margin-right: 2vw;
  font-family: Varela Round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<html>
  <body>
  
  <div id="ctn">
  
    <div id="button">
      <p id="button_text">Make me small and big all day long this is so exciting! Let's go broooh!</p>
    </div>
    
  </div>
  
    <div id="ctn_toggle">
  
      <div id="toggle_small" class="toggle">
        <p id="button_small">Click me to shrink!</p>
      </div>

      <div id="toggle_big" class="toggle">
        <p id="button_big">Click me to expand!</p>
      </div>
    
  </div>
  
  </body>
</html>

否则，这些是选项...：

#ctn {
  display: flex;
  float: left;
}

#button {
  width: 20vw;
  background-color: lightblue;
  padding: 10px;
  border-radius: 25px;
  margin-right: 1vw;
}

#button_text {
  font-size: 4vw;
}

#button2 {
  width: 20vw;
  background-color: lightblue;
  padding: 10px;
  border-radius: 25px;
  margin-right: 1vw;
}

#button_text2 {
  
}

#button3 {
  width: 20vw;
  height: 10vh;
  background-color: lightblue;
  padding: 10px;
  border-radius: 25px;
  margin-right: 1vw;
}

#button_text3 {
  font-size: 4vw;
}

#button4 {
  width: 20vw;
  height: 10vh;
  background-color: lightblue;
  padding: 10px;
  border-radius: 25px;
}

#button_text4 {
  
}

<html>
  <body>
  
  <div id="ctn">
  
    <div id="button">
      <p id="button_text">Fix button width and fix font-size</p>
    </div>

    <div id="button2">
      <p id="button_text2">Fix button width and no specific font-size</p>
    </div>

    <div id="button3">
      <p id="button_text3">Fix button width, fix button height and fix font-size</p>
    </div>
    
    <div id="button4">
      <p id="button_text4">Fix button width, fix button height and no font-size</p>
    </div>
    
  </div>
  
  </body>
</html>

javascript - 使用javascript制作动态字体大小以适应按钮

问题描述

解决方案

推荐阅读