宽度自适应问题

Question

<section style="border:1px solid #ccc;width:200px;overflow:auto;">
  <pre>这是一条非常长的内容，因为不换行导致溢出</pre>
  <hr />
</section>

这是测试地址 http://jsrun.net/caXKp/edit
如何使hr始终随着容器宽度而自适应？

Answer 1

<hr width="100% />

兼容大部分浏览器。
在 HTML 4.01 中，不赞成使用 hr 元素的 width 属性；在 XHTML 1.0 Strict DTD 中，不支持 hr 元素的 width 属性。
请使用 CSS 代替。
http://www.w3school.com.cn/ta...

Answer 2

该场景无法通过单纯通过css解决，只能换个思路
①让pre的内容不溢出，比如设置white-space: normal;
②设置hr的宽度为section的scrollWidth