如何在文字大小调整上粘贴文本？

Question

我想在我的应用中修复一个设计问题，每当调整一些文字时，它都不会粘在同一个地方。无论哪种方式，如果字体尺寸变小，字体会向上移动，或者当尺寸变大时字体向下移动。它不会停留在同一个地方，我希望原点位于字体的左下角。

以下是我想要实现的模式：

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

p应该留在absolute位置。

尝试使用代码段来查看问题：

$('.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。

更新：根据评论，您可以在修改top的同时使用JavaScript修改font-size，以便顶部向上移动更大字体大小，缩小字体。

$('.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>