Question

我正在尝试用这种方式包装div元素的span：

----------
|Sentence|
----------

-----------------
|It's a looooong|
|sentence       |
-----------------

它适用于简短的句子，但不会持续很长时间，因为最终结果是：

----------------------
|It's a loooong      |
|sentence            |
----------------------

代码类似于：

.div-with-border {
    display: inline-block;
    border: 1px solid red;
}
.div-with-border span {
    display: block;
}

table{
    width: 100px;
    font-size: 16px;
}

<table>
  <tr>
    <th width="50%"></th>
  </tr>
  <tr>
    <td>
      <div class="div-with-border">
        <span>Sentence</span>
      </div>
    </td>
  </tr>
  <tr>
    <td>
       <div class="div-with-border">
         <span>It's a loooooong sentence</span>
      </div>
    </td>
  </tr>
</table>

我基本上想删除单词break和div边的右边界之间的空白，如上例所示。

Answer 1

请分别设置span display:block;和text-align:justify，这将有助于检查以下内容：

.div-with-border {
  display: inline-block;
  border: 1px solid red;
  max-width: 100px;
}
.div-with-border span{
   text-align: justify;
   display:block;
}

<div class="div-with-border">
  <span>This is a long sentence</span>
</div>

Answer 2

这是文本换行时浏览器如何调整元素大小的结果。我认为不可能有一个纯粹的CSS解决方案。

您可以完成此操作的一种方法是在Javascript中计算文本宽度，因为它不包含此自动换行边缘宽度。然后，您可以强制将容器<div>的宽度设置为：

$(".div-with-border").each(function() {
  var textWidth = $(this).find("span").width();
  $(this).width(textWidth);
});

我正在使用jQuery来做到这一点，但您也可以使用香草JS。文本的宽度（特别是最长的文本行）是.offsetWidth。

这里是JSFiddle。

div周围的CSS边框包含跨度，同时完美地适合内容

2 个答案: