cover-view中文字被隐藏换行处理问题解决方法

六月初六月初 uni-app 2019-10-22 16:05:26

uni-app及小程序开发中cover-view标签中的文字自动换行处理方法！

原效果如图：


处理后效果如图：


关键css样式设置：（在cover-view上添加改css样式即可）

white-space:pre-wrap;

案例完整Uni-app代码：

<template>
	<view class="content">
		<cover-view style="white-space:pre-wrap;">六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

white-space 属性说明：

white-space 属性设置如何处理元素内的空白。

值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

兼容说明：


从上图中可以看出任何浏览器中都支持该属性，所以放心大胆的用！


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！