javascript - 换行时html文本元素的宽度

Question

我对文本容器的宽度有疑问。

我想实现这样的目标:

什么时候是红线我想要p的宽度结束。在此示例中，p 的宽度应约为 250 像素，而不是表格的 100% (300 像素)。
当文本在一行时一切正常

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

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

Answer 1

unfortunately, you can't correct the border position with pure html and css code

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

很简单。只需添加一个 < script >像下面的附加代码一样在您的 HTML 中标记!

• 首先:给出 border属性为 < div >位于

  元素之上的元素，而不是 CSS 文件中的

  元素!

• 第二: 将

  元素的显示更改为: display:inline;在 CSS 文件中。

可以看到inline display的功效，here .

< p > is a "block" displayed element which takes the whole line of it's parent. you have to set it's display to an "inline" to take the width of it's content!

• 第三种:使用 javascript 获取

  元素的宽度。

• 第四步:使用javascript设置

  元素的 宽度为步骤中获取的

  元素的宽度2.

您可以在下面的代码中进行测试:

tip1:我给

和

元素一个 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>

关于javascript - 换行时html文本元素的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45660611/