html -- pre标签内容如何自动换行？

在一些特殊的排版中，我们期望显示的内容能够和代码里的格式展示的一致。但是如果长度太长的话可以自动化行,而pre标签默认是不给换行的。
代码如下：

<template>
  <div class="pre_container">
    <pre>
          而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。
      </pre>
  </div>
</template>
<script>
export default {
  name: "preTag",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
.pre_container {
  margin: 0 auto;
  width: 500px;
  border: 1px solid red;
}
</style>

默认效果:

如何实现自动换行呢？
自动换行效果:

只需给pre标签设置如下css即可:

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}