javascript - 如何在调整字体大小时将文本粘贴到线条上？

Question

我想在我的应用程序中修复一个设计问题，每当调整某些文本的大小时，它就不会粘在同一位置。不管怎样，如果字体变小，字体就会向上移动；如果字体变大，字体就会向下移动。它不会停留在同一个地方，我希望原点位于字体的左下角。

这是我想要实现的目标的架构:

我在代码片段中添加了一行，每当字体大小发生变化时，字体应该始终位于该行的顶部(请注意，该行只是为了提供帮助，它不在我的应用程序中)。

p 应保持在绝对 位置。

尝试片段查看问题:

$('.opt-minus').click(function() {
  var $input = $(this).parent().find('input');
  var count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});

$('.opt-plus').click(function() {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});

$(document).on('change', '#tb-font-size', function() {
  var content = $(this).val();
  $('p').css({
    "font-size": content + 'px',
  })
});

.btn {
    line-height: 36px;
    float: left;
    cursor: pointer;
    background: white;
    color: #ecf0f1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    border: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 1px 15px;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #eaeaea;
  }
  
  input {
    float: left;
    padding: 0 10px;
    width: 50px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    border: solid 1px #eaeaea;
    display: inline-block;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
  }
  
  .tb-opt-int {
    height: 40px;
    width: 158px;
    margin-left: auto;
    margin-right: auto;
  }
  p {
    position:absolute;
    top:10px;
    left:30px;
  }
  .absolute {
    position: absolute;
    left: 0px;
    width: 100%;
    border-bottom: 1px solid;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>How to make it scale from bottom left ?</h3>
<div class="tb-opt-int">
  <span class="opt-minus btn">-</span>
  <input id="tb-font-size" type="text" class="tb-select" name="tb-fonts-size" value="16">
  <span class="opt-plus btn">+</span>
</div>
<div style="position:relative;">
  <p>Scaling from <strong>top left</strong> cross origin</p>

  <span class="absolute" style="top: 40px;"></span>
</div>

有没有办法用 Javascript 或 CSS 解决这个问题？

Answer 1

因为您使用的是top，所以文本的顶部将始终位于同一位置。您可以使用 bottom 来代替。

更新:根据评论，您可以在修改font-size的同时用JavaScript修改top，这样顶部将以较大的字体向上移动，以较小的字体向下移动。

$('.opt-minus').click(function() {
  var $input = $(this).parent().find('input');
  var count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});

$('.opt-plus').click(function() {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});

$(document).on('change', '#tb-font-size', function() {
  var content = $(this).val();
  var current_top = $(".scaling-p").position().top;
  var bottom = current_top + $(".scaling-p").height();
  var height =  $(".scaling-p").height();
  $('p').css({
    "font-size": content + 'px',
  }).css({
    top: (current_top - ((current_top +  $(".scaling-p").height()) - bottom)) + 'px'
  })
});

.btn {
    line-height: 36px;
    float: left;
    cursor: pointer;
    background: white;
    color: #ecf0f1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    border: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 1px 15px;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #eaeaea;
  }
  
  input {
    float: left;
    padding: 0 10px;
    width: 50px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    border: solid 1px #eaeaea;
    display: inline-block;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
  }
  
  .tb-opt-int {
    height: 40px;
    width: 158px;
    margin-left: auto;
    margin-right: auto;
  }
  p {
    position:absolute;
    top:22px;
    left:30px;
    margin:0;
    line-height: 1em;
  }
  .absolute {
    position: absolute;
    left: 0px;
    width: 100%;
    border-bottom: 1px solid;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>How to make it scale from bottom left ?</h3>
<div class="tb-opt-int">
  <span class="opt-minus btn">-</span>
  <input id="tb-font-size" type="text" class="tb-select" name="tb-fonts-size" value="16">
  <span class="opt-plus btn">+</span>
</div>
<div style="position:relative;">
  <p class="scaling-p">Scaling from <strong>top left</strong> cross origin</p>

  <span class="absolute" style="top: 40px;"></span>
</div>