css自动换行

作者: 锋_5bdc | 来源:发表于2019-05-08 14:18 被阅读0次

方法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。

css自动换行
方法1. 使用v-html 方法2：将div容器的white-space属性设置为pre-wrap即可解决问题。 ...
pre 自动换行
pre 标签实现自动换行，在css添加如下属性：
css 换行首行缩进鼠标样式
css换行 1⃣️强制不换行 2⃣️自动换行 3⃣️强制英文单词断行 4⃣️本人在用中英文都换行 ⚠️：官方解释...
CSS零碎
CSS自动换行、强制不换行、强制断行、超出显示省略号使用white-space属性强制不换行p { white-...
CSS样式自动换行(强制换行)
这两天在解决文本自动换行的问题，table中有些列的字段文字太长了，拉宽了整体table布局，文本位于span标签...
常用样式
1.各个浏览器透明度 2.css超出自动换行
css自动换行和截取
1、word-wrap:break-word; 单独使用内容将在边界内换行，当是字符串的时候会换一行进行 2....
【CSS】Pre 标签自动换行
元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。标签的...
css中实现强制不换行/自动换行/强制换行
1. 强制不换行 div{ white-space:nowrap; } 2. 自动换行 div{ word-w...
flex 换行
如代码所示，item定宽的情况，想让item列表自动换行，使用css 但是此时，换行后的4、5中间有一块空白，因...