在uniapp或者vue中单行文字或者符号无法换行的终极解决方案
在VUE开发过程中,会出现比较诡异的情况。
比如常规的英文或中文显示都是很正常的,但是当出现了一些中文符号(比如,!等等)在文末的时候,总是会超出view的显示区域。
那么在遇到上面这种问题我们记得检查下CSS中的样式设置是否有如下几个标签,如果没有的话记得参考下,问题妥妥的会解决。
div{
white-space:normal;
word-break:break-all;
word-warp:break-word;
}
具体的大致意思如下,记得看清楚
white-space:normal; //规定段落中的文本不进行换行
word-break:break-all; //允许单词中换行,在容器的最右边进行断开不会浪费空间
word-wrap:break-word; //防止长单词溢出,单词内部断句
word-break:break-word; //如果不想单词内断行可以进行单词间的断行
在uniapp或者vue中单行文字或者符号无法换行的终极解决方案的更多相关文章
- div中单行文字垂直水平居中
1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- vue中添加文字或图片水印
首先引用warterMark.js,内容如下 'use strict' var watermark = (className,str,type) => { let dom = document. ...
- vue中setTimeout切换浏览器页签时怎么清除解决方案
大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...
- vue中给window添加滚动监听无效的解决方案
原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...
- vue中使用baidushare分享到微信无法显示bug解决方案
最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js 经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因. 对比分析: 以往成功使用:另写了一个专门 ...
- css之div中纯文字单行和多行垂直居中
先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...
- OAF 中对文字实现html效果及对超级长文本实现默认换行,对只读的messageTextInput中的内容自动换行
今天遇到一个需求,客户注册页面客户化了一个超级长的注册须知,内容很多.但是样式相对又要做起来好看点. 注册须知的内容使用多个message拼接而成. 老大说rawText支持html样式,于是我想到了 ...
随机推荐
- 【Maven】Mac操作系统下安装配置maven环境变量
1.下载maven 下载地址:http://maven.apache.org/download.cgi 2.解压设置maven本地地址解压后 我放在 /Users/david/developer/ap ...
- C# 自定义无边框窗体阴影效果
工作中我们会经常遇到自定义一些窗口的样式,设置无边框然后自定义关闭.最大化等其他菜单,但是这样就失去了Winform自带的边框阴影效果,下面这个方法能让无边框增加阴影效果.代码如下: using Sy ...
- 初学WebGL引擎-BabylonJS:第2篇-基础模型体验
此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了. 接上一章代码 上章代码 <!DOCTYPE html> <html> <head> &l ...
- 基于canal的client-adapter数据同步必读指南
本文将介绍canal项目中client-adapter的使用,以及落地生产中需要考虑的可靠性.高可用与监控报警.(基于canal 1.1.4版本) canal作为mysql的实时数据订阅组件,实现了对 ...
- 深入了解Netty【三】Netty概述
1.简介 Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,它支持快速.简单地开发协议服务器和客户端等网络应用程序 ...
- Native Comments
local variables referenced from a Lambda expression must be final or effectively final. Lambda表达式中引用 ...
- Windows安装tensorflow教程 GPU版
PS:这是GPU版本,CPU版会用笔记本环境另写一篇博客. 前置准备 查看GPU型号 电脑桌面->右键我的电脑->选择管理->点击设备管理器 如下图: 如果不是英伟达显卡,那么不用 ...
- 云计算openstack——云计算、大数据、人工智能(16)
一.互联网行业及云计算 在互联网时代,技术是推动社会发展的驱动,云计算则是一个包罗万象的技术栈集合,通过网络提供IAAS.PAAS.SAAS等资源,涵盖从数据中心底层的硬件设置到最上层客户的应用.给我 ...
- python蟒蛇绘制
使用IDLE的文件方式编写代码并保存为PythonDraw.py文件 python蟒蛇绘制 import turtle引入了海龟绘图体系 使用setup函数,设定了一个宽650像素和高350像素的窗体 ...
- 论文翻译:2020_Acoustic Echo Cancellation Challenge Datasets And Testingframework
论文地址:ICASSP 2021声学回声消除挑战:数据集和测试框架 代码地址:https://github.com/microsoft/DNS-Challenge 主页:https://aec-cha ...