文本超出换行添加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有这样的要求.还记得,第一次做这个功能 ...
随机推荐
- PHY状态机分析
PHY的12种状态 enum phy_state { PHY_DOWN = 0, //关闭网卡 PHY_STARTING, //PHY设备准备好了,PHY driver尚为准备好 PHY_READY, ...
- 有趣的python库-MyQR
MyQR-个性二维码 基本使用 from MyQR import myqr import os myqr.run( words="hu qing nian ni zhen bang, you ...
- Python arcpy创建栅格、批量拼接栅格
本文介绍基于Python语言arcpy模块,实现栅格影像图层建立与多幅遥感影像数据批量拼接(Mosaic)的操作. 首先,相关操作所需具体代码如下: import os import arcp ...
- Cobaltstrike —— shellcode分析(一)
前言 搞iot搞久了,换个方向看看,改改口味. windows 常见结构体 在分析Cobaltstrike-shellcode之前我们得先了解一下windows下一些常见的结构体. X86 Threa ...
- 关于dynamic类型
动态类型是从C#4才开始有的,随着DLR一起引人的. 大部分时候的行为如同object类型,对应的IL代码也是object类型. 它的特点是编译时会忽略在dynamic上进行的操作,如调用方法,读写属 ...
- .net webapi+jwt demo
一.新建.net webapi程序 二.nuget包搜索jwt,点击安装 三.在model文件夹下建立三个主要类: public class AuthInfo { /// &l ...
- LeetCode-432 全O(1)的数据结构
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/all-oone-data-structure 题目描述 请你设计一个用于存储字符串计数的数据结构 ...
- 利用自定义ref实现防抖
1. debounce.js import { customRef } from 'vue'; export function debounceRef(value, delay = 1000) { l ...
- 公司有两台电脑,却分给一个上网ip
解决办法,只限于本公司: 电脑a和电脑b 电脑a先用ip 6.21上网,之后将ip改为其它: 电脑b改为6.21 此时两台电脑都能上网了
- plesk 关闭维护模式
最近遇到访问plesk时出现maintanase mode模式,于是网上搜了答案都是老外的,且没有明确怎么解决,但可能造成这一问题的原因也很多,我这个是这么解决的,和大家分享下,希望可以起到一个思路引 ...