文本超出换行添加white-space:wrap无效
场景描述:
在vue项目中,在Modal弹窗里面使用Form表单组件,然后在FormItem里面放一个div标签用来装文字内容。有时会出现内容超出Form表单宽度但是不换行的问题。
解决方法:
给div设置样式,例如:
.text-container{
word-break: break-all;
word-wrap: break-world;
white-space: wrap;
}
代码:
<Modal
title="详情"
width="600"
:footer-hide="true"
v-model="showModal"
>
<Form :label-width="120" :model="formData" style="height: 50vh; overflow-y: scroll">
<FormItem label="文字">
<div class="text-container">{{formData.content}}</div>
</FormItem>
</Form>
</Modal>
补充文本超出显示省略号...:
单行文本超出长度显示省略号...:
.text-ellipsis{
width: 100%; //或者固定宽度
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
多行文本超出长度显示省略号...:
.text-ellipsis{
width: 100%;
overflow: hidden;
-webkit-line-clamp: 3; //行数,语句限制显示文本的行数
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; // 设置伸缩盒对象的子元素的排列方式;
}
参考链接:
https://segmentfault.com/a/1190000040981038
文本超出换行添加white-space:wrap无效的更多相关文章
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- 用css实现文本不换行切超出限制时显示省略号(小tips)
div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;/*文本不换行*/ } 如上 ...
- 内容溢出文字用"..."代替 以及超出文本内容换行
text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 超出.....代替 overflow: hidden; word-break: ...
- WPF TextBox/TextBlock 文本超出显示时,文本靠右显示
文本框显示 文本框正常显示: 文本框超出区域显示: 实现方案 判断文本框是否超出区域 请见<TextBlock IsTextTrimmed 判断文本是否超出> 设置文本布局显示 1. Fl ...
- css超出一行添加省略号属性:text-overflow和white-space
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- css 文本超出容器长度后自动省略的方法!
我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...
- 不值一提,却又不得不提的“CSS文本超出部分省略号代替”
偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...
随机推荐
- ctf命令执行刷题
web29 error_reporting(0); if(isset($_GET['c'])){ $c = $_GET['c']; if(!preg_match("/flag/i" ...
- new Date(time).getTime()在ios返回NaN
解决: IOS识别(年月日时分秒) new Date(2010,0,1,0,0,0).getTime() 1.问题出在: 日期转成时间戳getTime(): var time = "2017 ...
- ubuntu 启动脚本变化
ubuntu-16.10 开始不再使用initd管理系统,改用systemd- 快速看了 systemd 的使用方法,发现改动有点大, 包括用 systemctl 命令来替换了 service 和 c ...
- Canonical为所有支持的Ubuntu LTS系统发布了新的Linux内核更新
Canonical近日为所有支持的Ubuntu LTS系统发布了新的Linux内核更新,以解决总共19个安全漏洞. 新的Ubuntu内核更新仅适用于长期支持的Ubuntu系统,包括Ubuntu 22. ...
- vscode注释插件
VSCODE注释插件:koro1FileHeader 按koroFileHeader 插件,配置默认注释 1.在扩展中搜索koroFileHeader,安装 2.安装完成后,在设置中搜索,koro1F ...
- .NET core api返回烦人的null
默认的时候 把这个为null的去掉 只需要加入这一行代码 即可搞定 builder.Services.AddMvc().AddJsonOptions(o => { o.JsonSeriali ...
- .net core使用 ELK
一 Linux 下安装部署 第一种方法:docker-compose 安装方式 1.1 创建 docker-compose.yml 文件 version: '3.1' services: elasti ...
- C语言中的malloc、new、memset函数解析
1. malloc 在window下,malloc的函数原型: extern void *malloc(unsigned int num_bytes); 头文件: #include<malloc ...
- Oracle 查看表空间使用率
SELECT Upper(F.TABLESPACE_NAME) "TablespaceName", D.TOT_GROOTTE_MB "Total(M)", D ...
- 还在拿flex进行布局吗?快来试试grid网格布局吧
例: 遇到这种布局要求我们应该怎么办? 方法1:使用flex布局 <style> * { padding: 0; margin: 0; } .gird_Box { width: 100vw ...