css 文字换行

4人阅读 评论(0) 收藏 举报
分类:
使用CSS让多出来的字变为省略号
<style>
.text1 {
  width:200px;
  overflow:hidden;
  text-overflow:ellipsis;//显示省略号
  -o-text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
  -moz-text-overflow:ellipsis;
  white-space:nowrap;//强制不换行
}
/*两行文在断行*/
.text2 {
  width:200px;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
</style>
 
<div class="text1">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
 
<br />
 
<div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>


上图Demo的效果如下:
 
查看评论

明盒开发

明盒开发未经允许,严禁转载本栏目内容本文经许可转载自软件工程专家网www.21cmm.com,未经CSDN许可,请勿随便转载,谢谢合作(一) 明盒结构  明盒定义了实现转换状态盒功能的过程。明盒和相应...
  • gigix
  • gigix
  • 2002-03-14 10:15:00
  • 1677

css实现文字垂直居中且自动换行

demo .box { width: 500px; height: 300px...
  • Alin_leeon
  • Alin_leeon
  • 2017-03-31 10:01:31
  • 2308

css——如何让一段文字自动换行,并且左对齐,设置背景透明

word-break:break-all; padding-left:100px;
  • lengyuefengqing
  • lengyuefengqing
  • 2016-06-16 19:33:14
  • 2120

CSS设置文字不换行,超出字数用...显示

这是一段实验文字,超出字数用...显示.textText{ width:50px; overflow:hidden; text-overflow:ellipsis; w...
  • qq_35388564
  • qq_35388564
  • 2017-08-15 11:29:16
  • 599

css 多行文字换行

每次做项目 都能碰到文字换行 尤其是标题和名称 ,都得百度一下,今天特意记下来 今天主题是超长英文文本自动换行word-wrap的使用,在介绍这个属性的同时,我还把word-break和white-...
  • u010688943
  • u010688943
  • 2017-03-02 13:17:06
  • 1057

css实现水平垂直居中(换行也可行)

.d1 { display:table; height: 200px; } .d2 { vertical-align:...
  • core_song
  • core_song
  • 2017-05-02 16:55:36
  • 346

CSS 强制换行和禁止换行

强制换行       1、word-break: break-all;       只对英文起作用,以字母作为换行依据。       2、word-wrap: break-word;   只对英文...
  • caizhitong
  • caizhitong
  • 2016-12-21 14:16:40
  • 8930

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没...
  • liuyan19891230
  • liuyan19891230
  • 2016-03-24 10:21:56
  • 82348

css 禁止文字自动换行

white-space:nowrap;
  • u011206991
  • u011206991
  • 2016-04-08 16:16:36
  • 651

CSS---解决文本溢出,换行

当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况)。 这时我们可以使用Css中的几个属于来解。有以下的三个属于可以解决问题: 1,wor...
  • luxideyao
  • luxideyao
  • 2014-08-06 00:00:12
  • 25406
    个人资料
    持之以恒
    等级:
    访问量: 4109
    积分: 510
    排名: 10万+
    文章分类
    最新评论