写代码的人都知道，微信小程序里那个换行，看着简单，真搞起来能把人逼疯。你辛辛苦苦写了一堆文本，预览一看，要么挤成一团像没分段的报纸，要么字跑到屏幕外面去了，跟吃了跳跳糖似的。别急，今天我就把那些让文本乖乖换行的技巧掰开揉碎讲给你听，保证你读完就能上手，不用再跟排版死磕。
先说说最基础的，``组件里的换行。很多人以为在代码里敲个回车就能自动换行，结果一跑，文本还是连在一起，跟没断气的面条一样。实际上，微信小程序里，``默认是不会自动换行的，你得加上`user-select`属性或者用`white-space`样式。比如，你想让一段长文本在固定宽度内自动换行，直接给``标签加个`style="word-break: break-all;"`，它就会乖乖在单词或者字符边界断开。但别高兴太早，这招只对英文字符和数字管用，中文本身就能自动换行，可一旦遇到中英文混排，又容易出幺蛾子。我的经验是，先给外层容器设定一个固定的宽度或者最大宽度，然后在内层``上同时设置`word-wrap: break-word`和`overflow-wrap: break-word`，这样无论是长英文链接还是中英文混合，都能找到合适的断点，不会把单词劈成两半。
再深入一步，``组件里的文本换行又是另一回事。很多人图省事，把一大段文本直接塞进``，结果发现换行全靠运气。其实``默认是块级元素，宽度默认占满父容器，文本自然会在边界换行。但问题在于，如果你给``设置了`display: flex`或者`white-space: nowrap`，那文本就会变成一根筋，死活不换行。这时候你得手动加上`white-space: normal`或者`overflow-wrap: break-word`，才能让它恢复理智。我试过一个场景：在列表项里展示用户评论，评论里既有中文又有表情符号。一开始用``直接渲染，表情符号把行高撑得乱七八糟。后来改成用``嵌套，再配合`line-height`和`letter-spacing`微调，才把排版稳住。记住，块级元素的换行控制权在你手里，别指望它自动理解你的意图。
说到换行，不能不提``这个坑。很多人觉得滚动视图里文本随便写，反正能滚动。但现实是，``默认不会让文本自动换行，尤其是当你设置了`flex-wrap: nowrap`或者`white-space: pre`时，文本会一直往右延伸，直到屏幕外面。解决办法很简单：给``里的容器加上`word-break: break-all`和`overflow: hidden`，同时为``自身设定一个固定的高度。但这里有个小陷阱，如果你用`scroll-x`开启横向滚动，那文本反而会故意不换行，以便横向滚动查看。所以你得想清楚，到底是要横向滚动长文本，还是要纵向滚动分段内容。我踩过的一个坑是，在聊天消息列表里用``渲染长文本气泡，结果因为没处理换行，气泡宽度撑破了屏幕。后来我在气泡容器上加了个`max-width: 70%`，再配合`word-break: break-word`，才让长文本在气泡内乖乖换行。
如果你觉得手动写样式太麻烦，那就试试``组件。这个组件可以直接渲染HTML字符串，支持`
`标签、``标签甚至`
`。也就是说，你可以在后端生成一段带换行符的HTML，然后直接扔给`
`，它会自动解析并换行。比如，用户输入的评论里包含`\n`，你可以在服务端把`\n`替换成`
`，再传给前端。但``有个毛病，它不支持所有CSS属性，比如`line-clamp`、`text-overflow`这些，而且渲染性能比原生组件差。所以，如果你的文本量很大或者需要频繁更新，建议只在静态内容或者少量文本的场景下用它。我做过一个产品介绍页，里面有好几段长文本，用``加上``标签分段显示，再配合`line-height: 1.8`，效果比纯文本组件好得多，而且开发效率高，不用一行行写样式。
把目光转向动态换行，比如用户输入的内容里有表情、英文、数字混合。这时候光靠CSS不够，得结合JavaScript。比如，你可以用`wx.createSelectorQuery()`获取文本组件的实际渲染宽度，然后动态计算每行能容纳多少个字符，再手动插入换行符。但这招很笨重，容易导致性能问题。更好的办法是用`
