让示例代码在手机上换行显示以避免恼人的滚动条

让示例代码在手机上换行显示以避免恼人的滚动条是网站优化与美化中一个较为普遍的需求，我们可以采取以下方法来实现：

方法一：使用“pre”标签

在HTML中，我们可以使用“pre”标签来定义格式化文本，这里的“pre”指的是preformatted（预格式化）。使用“pre”标签的代码块会保留原有的空格、换行符等元素，而不会将它们作为网页渲染的内容处理。代码示例：

<pre>
var result = 10 + 20;
console.log(result);
</pre>

这样，在手机上查看该代码段时，代码就会自动换行显示。但要注意，使用“pre”标签可能会对代码的排版效果产生影响，因此需要根据情况而定，谨慎使用。

方法二：使用CSS属性“word-wrap”

另一种方法是通过为代码段添加“word-wrap: break-word”属性来实现换行。这个属性的作用是，当容器不足以显示单词时，自动将单词拆分成多行，避免水平滚动条的出现。代码示例：

<style>
    .code-block {
        overflow: auto;
        word-wrap: break-word;
    }
</style>

<div class="code-block">
    var result = 10 + 20;
    console.log(result);
</div>

当然，以上这两种方法也可以进行组合使用，比如在“pre”标签中添加“word-wrap: break-word”属性，以达到更好的效果。

希望以上内容能够对您有所帮助。