Question

当我在其标签之间键入文本时，元素的宽度会发生变化。我的问题是我想要某种宽度与高度的关系。随着宽度变长，高度增加相同，但我不希望高度超过35px，也不要低于5px。

我试过的代码：

HTML：

<div class="btn bg-red">This buttons width expands as I write more and more text.</div>

CSS：

.btn {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block !important;
  border-radius: 6px;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  height: relative;
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}

我不确定CSS是否可以这样做。

然后我尝试了这个：

HTML：

<div class="btn bg-red"><div class="auto">This buttons width expands as I write more and more text.</div></div>

CSS：

.btn {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block !important;
  border-radius: 6px;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
.auto {
  height: 20%
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}

使用Javascript：

var cw = $('.auto').width();
$('.auto').css({'height':cw+'px'});

第二个代码似乎不符合display:inline。它可以在您手动更改代码时起作用。

查找第一个代码here的演示。

查找第二个代码here的演示。

修改

理解含义：当按钮/元素的文本较少时，宽度较小且方式相同，高度应相同但像素减少20％。当文本增加时，宽度增加，高度也应增加。高度的最大长度最高可达35px，但默认宽度为无限。

Answer 1

我不知道你如何在你的div上添加文字。无论如何，在以下代码段中，eventlistener触发器设置为input，因为它是contenteditable div （文本由用户通过键盘添加）。< / p>

代码段＃1：

document.getElementsByTagName("body")[0].onload=function(){equalize()};

var target = document.getElementById("target");

target.addEventListener("input", equalize);

function equalize() {  
var x = target.offsetWidth;
target.style.height = x + "px";
}

#target {
  display: inline-block;
  background: skyblue;  
}

<div id=target contenteditable="true">write here</div>

这第二个片段与前一个片段相同，但现在高度比宽度小20％（前一个示例中相等）加上最大高度限制为100px。

Snippet＃2：

var target = document.getElementById("target");

document.getElementsByTagName("body")[0].onload=function(){equalize()};
target.addEventListener("input", equalize);

function equalize() {  
var x = target.offsetWidth;
var reducedpart = x / 100 * 20;
var result =  x - reducedpart;

  if (result > 100) {
    var result = 100;    
}  
  
target.style.height = result + "px";
}

#target {
  display: inline-block;
  background: skyblue; 
}

<div id=target contenteditable="true">write here</div>

与之前相同，但使用padding代替height让文字位于中心位置：

代码段＃3：

var target = document.getElementById("target");

document.getElementsByTagName("body")[0].onload=function(){equalize()};
target.addEventListener("input", equalize);

function equalize() {  
var x = target.offsetWidth;
var reducedpart = x / 100 * 20;
var result =  x - reducedpart;

  if (result > 100) {
    var result = 100;    
}  

var secresult = result / 2;

target.style.paddingTop = secresult + "px";
target.style.paddingBottom = secresult + "px";
}

#target {
  display: inline-block;
  background: skyblue; 
  padding-left: 15px;
  padding-right: 15px;
}

<div id=target contenteditable="true">write here</div>

仅使用padding代替height的CSS解决方法：

代码段＃4：

.container {  
  vertical-align: bottom;
  display: inline-block;
}

#a {
  width: 100%;
  padding-bottom: calc(80% - 1em);
  background: gold;
}

#b {
  width: 100%;
  padding-top: calc(40% - 0.5em);
  padding-bottom: calc(40% - 0.5em);
  background: tomato;
}

<div class=container><div id=a contenteditable="true">write here</div></div>
<div class=container><div id=b contenteditable="true">write here</div></div>

Answer 2

在jquery中有一个函数.height（），它获取给定ID或Class中html元素的当前计算高度。获取div.auto的高度值可以监控身高的增加。鉴于此，您可以创建一个条件if ($('.auto').height() <= 35px)，将其限制为35px。

将此<script type="text/javascript" src="jquery-1.12.2.js"></script>放在<head>中，并且您拥有最新的JQuery库。

这里是代码的完整实现。在你的localhost中尝试一下，因为有时候它不会在jsfiddle上工作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .btn {
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block !important;
        border-radius: 6px;
        color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .auto {
        height: 20%
      }
      .bg-red{background-color:#F55C58;}
      .bg-red:hover{background-color:#F44946}
    </style>
    <script type="text/javascript" src="jquery-1.12.2.js"></script>
  </head>
  <body>
    <div class="btn bg-red"><div class="auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
    <script type="text/javascript">
    var cw = $('.auto').width();
    if ($('.auto').height() <= 35px) {
      $('.auto').css({'height':cw+'px'});
    }
    </script>
  </body>
</html>

希望这会有所帮助

与HTML / CSS中的宽度相比，更改元素高度

2 个答案: