超出文本截取替换为省略号

今天做了一个如下图的模块

其中，标题以及介绍这两块都需要做超出某个宽度就截取一行或两行文字，后面用省略号代替。

由于是做的手机页面，用JS来开销太大，只能从CSS入手。

一行的很好解决。

如下就OK了。

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

多行的想了很久，比如，写定行高，超出隐藏，弄个省略号作为补丁打在尾部。但是有个问题，页面宽度不固定，可能会出现只遮住一半字的情况，看起来很Low。

继续查找资料，CSSV5啊！

-webkit-line-clamp属性可以控制截取文本行数

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

　　

超出文本截取替换为省略号

时间： 2025-01-13 19:16:46

超出文本截取替换为省略号的相关文章

使用CSS如何实现截取标题并用省略号表示超出部分

使用CSS如何实现截取标题并用省略号表示超出部分:建议:尽可能的手写代码,可以有效的提高学习效率和深度.众多的网站都有这样的效果,当新闻标题过长的时候,一般都会截取一部分,并且会在末尾使用省略号(...)表示被截取掉的部分.这样的效果当然也可以由后台程序员来完成,当然前台人员利用CSS也可以实现此效果,可以省却很多后台代码,有着不小的有点.下面简单介绍一下如何实现此种效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta ch

超出文本显示省略号

对于大多数刚入门的程序员,都是不是太注重代码的细节,也就是写出来的代码不是太完善.有些我们设置的标签能放下6个字,后期我们又要加多几个字,又不能改变标签的宽度,又要保持外观样式的美观性,那我们怎么办的?下面我就给大家介绍一种超出文本显示用省略号代替的一种方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号&

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */     text-overflow:ellipsis;

css3实现超出文本指定行数(指定文本长度)用省略号代替

测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta http-equiv="Content-Type" content=&qu

css文本溢出隐藏显示省略号（单行+多行）

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     overflow: hidden;//文本溢出隐藏     text-overflow: ellipsis;//文本溢出显示省略号     white-space: nowarp;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在webkit内核中,可以利用-webkit-

文本超过宽度显示省略号

文本超过宽度,以省略号显示有2种, 第一种单行不换行 <style> .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } </style> 第二种2行或者2行以上的文本要在结尾省略号超出部分

css居然有根据容器宽度自动截取长度加省略号功能，强大!!

作者:☆威廉古堡♂ 项目中最初的做法(js截取): //字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex,"**&

HTML中超出的内容显示为省略号

CSS超出文本用省略号显示 兼容firefox IE6 IE7 第一种方法: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css设置文字隐藏</title> 6 <style type="text/css"> 7 .css1{ 8 color:#6699ff; 9 border:1px #

文字超出自动截取为...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字超出自动截取为...</title> </head> <body> <style> *{ margin:0; padding:0; } body{font-family:Arial, Helvetica, sans-serif;} h2,em{ font-w