Question

我正在尝试为我的标签容器开发一个resize函数。但标签＆＃39;我想，总宽度因字符渲染而异。在下面的示例中，所有容器具有相对相同的标签总宽度。但像素差异接近25。

我在容器属性中有1个px padding-left。这就是为什么我从1开始变量的原因。此外，代码的margin和border属性的值也是1px。这就是为什么我得到.outerWidth()才能拥有一切。

如何在屏幕上显示标签宽度的精确总和？换句话说，制作i == ii的正确功能是什么？

＆＃13;

var  i = 1, ii = 1;
            $('#tagcontainer1').children("tag").each(function () {
                i += $(this).outerWidth()
            });
            $('#tagcontainer2').children("tag").each(function () {
                ii += $(this).outerWidth()
            });
            alert("#tagcontainer1 tags total width: "+i+" and #tagcontainer2 tags total width: "+ii);

＆＃13;

div {
  padding: 1px 0px 0px 1px; 
  border: 1px solid black;
  width: 208px;
  height: 22px;
  overflow: hidden
}
tag {
  background: green;
  font: bold 16px/normal arial, helvetica, sans-serif;
  margin: 0px 1px 1px 0px;
  border: 1px solid black;
  border-image: none;
  color: yellow;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="tagcontainer1"><tag>i</tag><tag>i</tag><tag>i</tag><tag >i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag >i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag>i</tag><tag >i</tag></div><div id="tagcontainer2"><tag>asd</tag><tag>asd</tag><tag>asd</tag><tag>asd</tag><tag>a</tag></div>

＆＃13;

Answer 1

您需要include margin到外部宽度计算，如：

$(this).outerWidth(true)

如何获得不同字符串长度的正确标签大小？

1 个答案: