css自动换行

方法1. 使用v-html

// JS部分
this.text = res.data.replace(/\n/g, '<br>')
// HTML部分
<div v-html="text"></div>

方法2:将div容器的white-space属性设置为pre-wrap即可解决问题。

.text-wrapper {
  white-space: pre-wrap;
}

// HTML部分
<div class="text-wrapper">{{text}}</div>

pre-wrap值的意思是保留空白并且正常换行。
white-space各属性值详见这里。其实设置为pre即可使换行符发挥作用,但这时文本在div宽度不足时不会自动换行,而是撞破边界延伸到div外部去,所以还得加上wrap。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,792评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,328评论 0 11
  • 1、word-wrap:break-word; 单独使用内容将在边界内换行,当是字符串的时候会换一行进行 2....
    六月繁花开阅读 283评论 0 0
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,038评论 1 4
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,616评论 0 6