Line-height doesn't change relatively (based on the size of its parent div)

user_12168235 0
Viewed 344

I have set the line-height to be 20 pixels like so line-height: 20px. And when I change the size of its parent div, I want the line-height to change accordingly.

In the example below, you can see that as we change the size of the parent div, the line-height of <pre> tag is not the same. Even though its value never changes.

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>

angular css html jquery javascript
2 Answers

Unitless values: use this number multiplied by the element's font size

line-height: 1.5;

so it will be 150% of your elements font-size and will increase if you increase the font-size but while using px the line height will stay 30px even if you increase the font size of your element.

user_93502740

See here it's working.. I have just set line-height: 1.5 instead to use 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>

user_121682350
Related