移动端奇葩的多行文字省略隐藏

white-space: nowrap;

这个属性表示规定段落中的文本不进行换行；

在项目中
font-size:0.6rem;

text-overflow: ellipsis;（超出行用省略号...表示）

这样设置,查看box中的height发现高度是17px
而不超出行宽,height高度18px
这样导致 float:left 向左浮动不能对齐

所以这里做了一个解决办法
设置 min-height值

时间： 2024-10-10 09:22:04

移动端奇葩的多行文字省略隐藏的相关文章

CSS实现单行与多行文字省略（truncation）

在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: 1 <div class="container"> 2 <div class="box"> 3 <div class="box-content"> 4 <h5 class=&q

div中只显示2行文字超出隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; overflow: hidden;//超出隐藏 text-overflow: ellipsis;//超出文本设置为... display:-webkit-box

文字超出隐藏

1.单行文字 <html> <head> <meta charset="utf-8"> <style> #row{ display: block; /* 必备的四个条件 */ width:100px;/*宽度 */ overflow: hidden;/*超出隐藏*/ white-space: nowrap;/* 强制不换行 */ text-overflow:ellipsis;/*文字隐藏的格式 */ } </style> &l

文字溢出隐藏，隐藏的问字用省略号表示

之前在写页面的时候用的都是单行文字溢出隐藏,今天遇到了多行文字溢出隐藏,溢出部分用省略号.我通过查阅一些资料整理了一下,拿出来与大家分享一下. 单行文本的溢出隐藏对于单行文本溢出隐藏,text-overflow: ellipsis 就能完美的解决,不过在使用他时,一定要结合 overflow: hidden和 white-space: nowrap;,我有时就忘记写了,导致效果出不来,还让我找了半天. 1 <!DOCTYPE html> 2 <html> 3 <he

单行和多行文字溢出省略

.text-ellipsis /* { 单行文字溢出省略 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 文字溢出省略 */ white-space: nowrap; /* 文字不换行 */ } .multiline-ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webki

大小不固定的图片和多行文字的垂直水平居中

一.大小不固定,多行文字的垂直居中 ① 单行文字可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了.例如: 单行文字居中显示测试,css样式为:height:3em; line-height:3em;-- ② 多行文字但是对于外框高度固定,文字大小个数不固定的多行文字呢?文字可能一行显示,也有可能多行显示:文字可能是小号字体,也有可能是大号的.这时候如何让其垂直居中显示呢?看下面! 这里的文字用来做多

转图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示.关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是在我看

大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是

文字标注，多行文字操作文字标注

文字标注,多行文字操作文字标注.CAD制图设计工作中,常常会需要对CAD图纸进行文字标注.那么该如何进行文字标注呢?今天小编就给大家具体演示一下,文字标注,多行文字操作文字标注.演示步骤如下: 步骤一:首先,我们在浏览器里搜索迅捷CAD编辑器专业版下载安装到电脑端. 步骤二:运行软件,在软件底部命令框中输入ST指令,点击回车键或者空格键,打开文字样式. 步骤三:在文字样式里新增一个新的样式,选择合适的宽度和高度,选择字体后,点击确定套用. 步骤四:点击CAD软件界面顶部的"A"多行文字