jquery width（）不处理文本

我有两个包含文本的容器，我正在尝试获取它们的宽度并将它们添加到一起。我已经设置了一个JSFIDLE，但它似乎根本不起作用，我也不知道为什么。我同时使用了宽度和内部宽度

这是小提琴：

这是代码：

HTML:

JS:

div是一个块级元素，所以它取容器的全宽，所以把它们加在一起当然会使两者的全宽加倍，如果你想把div的值单独取其内容的实际宽度，你可以将它改为内联块或浮动块，并根据它计算宽度

您也可以不使用JS来实现这一点，您可以添加一个容器

<div class="container">
    <div class="text-1 text">hello</div>
    <div class="text-2 text">hello</div>
    <div class="length"></div>
</div>

---

看起来很好用。每个div占用了页面的全部长度。乘以2，这就是你所看到的。

.length {
  border:1px solid red;
  height:5px;
}

$(document).ready(function() { 
  $(".length").css({
    width:$(".text-1").innerWidth() + $(".text-2").innerWidth() 
  });
});

<div class="container">
    <div class="text-1 text">hello</div>
    <div class="text-2 text">hello</div>
    <div class="length"></div>
</div>

.container, .text {
    display:inline-block;
}