问题描述在开发Vue组件的时候,总会出现文字比较大的组件。此时如果使用大文本作为参数,文本换行符(\n)不能正常换行,而是用空格代替。解决方案我们可以利用css样式中的white-space,将文本区域的样式设置为:white-space:pre-line;,就可以轻松解决。注意不要使用white-space:pre-wrap;,这种风格也会保留前导和尾随空格,并且会出现对齐异常。扩展知识,white-space的可配置值如下:正常的连续空白字符会被合并,换行符会被当作空白字符处理。换行符是填充“行框”所必需的。nowrap和正常一样,连续的空白字符将被合并。但文本中的换行符无效。前连续空白字符将被保留。遇到换行符或元素时会发生换行。预换行的连续空白字符将被保留。当遇到换行符或元素时,或者需要填充“行框”时,行会被打断。行前连续的空白字符将被合并。当遇到换行符或元素时,或者需要填充“行框”时,就会遇到换行符。break-spaces的行为与pre-wrap相同,除了:任何保留的空白序列总是占用空间,包括在行尾。在每个保留的空格字符之后存在换行机会,包括空格字符之间。这个预留空间占用空间而不悬挂,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。
