line-height 没有相对变化（基于其父 div 的大小）答案

【问题标题】：Line-height doesn't change relatively (based on the size of its parent div)line-height 没有相对变化（基于其父 div 的大小）
【发布时间】：2020-10-27 08:28:38
【问题描述】：

我已将行高设置为 20 像素，就像 line-height: 20px 一样。当我改变其父 div 的大小时，我希望 line-height 相应地改变。

在下面的例子中，你可以看到随着我们改变parent div的大小，<pre>标签的line-height是不一样的。即使它的value 永远不会改变。

function settextpos(){
        let top = ($("#video-div").outerHeight() * 10) / 200;
        let left = ($("#video-div").outerWidth() * 20) / 400;
        let size = ($("#video-div").outerWidth() * 15) / 400;
        $("#user_text").css("top", top);
        $("#user_text").css("left", left);
        $("#user_text").css("font-size", size);
}

function myFunction(){
    var x = document.getElementById("mySelect").value;
    let temp_scal = x / 100;
    $("#video-div").css("height", 200 * temp_scal);
    $("#video-div").css("width", 400 * temp_scal);
    $("#main-video-div").css("height", 200 * temp_scal);
    $("#main-video-div").css("width", 400 * temp_scal);
    settextpos();
}

.video-div {
  margin: auto;
  overflow: hidden;
  width:400px;
  height:200px;
  background:#0095ff;
  position: relative;
}

#user_text {
  font-size: 15px;
  position: absolute;
  top:10px;
  left:10px;
  font-weight: 500;
  color: black;
  word-break: break-word;
  text-align: center;
  width: max-content;
  padding: 0 4px;
  overflow: hidden;
  line-height:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <select id="mySelect" onchange="myFunction()">
  <option value="10">10%
  <option value="25">25%
  <option value="50">50%
  <option value="75">75%
  <option value="100">100%
  <option value="125">125%
  <option value="150">150%
  <option value="175">175%
  <option value="200">200%
</select>
<div id="main-video-div" style="margin: auto;">
    <div id="video-div" class="video-div shadow">
        <pre id="user_text">
            This is demo Text.
            This is demo Text.
         </pre>
     </div>
 </div>

【问题讨论】：

你用的是什么浏览器？至少在 Firefox 和 Chrome 中，行高没有变化。忽略初始选择器值不代表应用于#user_text 的缩放因子的错误，更改缩放百分比不会更改行高 - 可以将其视为句点之间的垂直距离每行的末尾并保持固定在30px。
我正在使用Firefox、Chrom和Safari。这些都是我正在使用的浏览器。

标签： javascript html jquery css angular

【解决方案1】：

无单位值：使用此数字相乘按元素的字体大小

line-height: 1.5;

所以它将是元素 font-size 的 150%，并且如果你增加 font-size 会增加，但是在使用 px 时，即使你增加元素的字体大小，行高也会保持 30px。

【讨论】：

【解决方案2】：

看到这里它正在工作。我刚刚设置了line-height: 1.5，而不是使用px。

function settextpos(){
        let top = ($("#video-div").outerHeight() * 10) / 200;
        let left = ($("#video-div").outerWidth() * 20) / 400;
        let size = ($("#video-div").outerWidth() * 15) / 400;
        $("#user_text").css("top", top);
        $("#user_text").css("left", left);
        $("#user_text").css("font-size", size);
}

function myFunction(){
    var x = document.getElementById("mySelect").value;
    let temp_scal = x / 100;
    $("#video-div").css("height", 200 * temp_scal);
    $("#video-div").css("width", 400 * temp_scal);
    $("#main-video-div").css("height", 200 * temp_scal);
    $("#main-video-div").css("width", 400 * temp_scal);
    settextpos();
}

.video-div {
  margin: auto;
  overflow: hidden;
  width:400px;
  height:200px;
  background:#0095ff;
  position: relative;
}

#user_text {
  font-size: 15px;
  position: absolute;
  top:10px;
  left:10px;
  font-weight: 500;
  color: black;
  word-break: break-word;
  text-align: center;
  width: max-content;
  padding: 0 4px;
  overflow: hidden;
  line-height:1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <select id="mySelect" onchange="myFunction()">
  <option value="10">10%
  <option value="25">25%
  <option value="50">50%
  <option value="75">75%
  <option value="100">100%
  <option value="125">125%
  <option value="150">150%
  <option value="175">175%
  <option value="200">200%
</select>
<div id="main-video-div" style="margin: auto;">
    <div id="video-div" class="video-div shadow">
        <pre id="user_text">
            This is demo Text.
            This is demo Text.
         </pre>
     </div>
 </div>

【讨论】：