<hr>宽度自适应问题

Question

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

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

Answer 1

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