断行时html文本元素的宽度

Question

我的文本容器宽度有问题。

我想要达到这样的目标：

什么时候是红线，我想要p的宽度结束。在这个例子中，p的宽度应该是约250px，而不是表的100％（300px） 当文字在一行中时一切正常

＆＃13;

＆＃13;

p{
  border: 1px solid black;
  display: inline-block;
}
table{
   width: 300px;
}

＆＃13;

<table>
  <tr>
    <td>
      <div>
        <p>texttext textfdftext texttexttexttext texttexttexttext</p>
      </div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

遗憾的是，您无法使用纯HTML和CSS代码修正边框位置

但您可以使用 javascript 来执行此操作。

这很容易。只需在HTML中添加< script >标记，就像下面的附加代码一样！

• FIRST：将border属性提供给< div >元素，该元素位于＆lt; p>元素，而不是＆lt; p> CSS文件中的元素！

• SECOND：更改＆lt;的显示p>要素： CSS文件中的display:inline;。

您可以看到内嵌展示，here的效果。

  

＆LT; p>是一个“块”显示的元素，它占据了它的父线的整行。你必须将它的显示设置为“内嵌”以获取其内容的宽度！

• THIRD：使用javascript 获取 ＆lt;的宽度p>元件

• 第四：使用javascript 设置 的宽度＆lt; div>元素到宽度＆lt; p>在步骤2中获得的元素。

你可以在下面的代码中测试它：

tip1 ：我给了＆lt; div>和＆lt; p>元素id每个元素。

tip2 ：结果的红色边框是table元素的边框。

p{
  /* border: 1px solid black; */
  display: inline;
}
div{
  border: 1px solid black;
}
table{
   width:300px;
   border: 2px solid red;
}

<table>
  <tr>
    <td>
      <div id="topOfText">
        <p id="text">texttext textfdftext texttexttexttext texttexttexttext</p>
      </div>
    </td>
  </tr>
</table>

<script>
function resizeBorder(){
  var textWidth = document.getElementById("text").offsetWidth;
  var topOfText = document.getElementById("topOfText");
  topOfText.style.width = textWidth+"px";
}
resizeBorder();  
</script>