CSS标题词长段显示省略号法

前一段时间在移动站的重建,遇到一个产品列表标题的需求只有两行,然后两个多行字符以省略号。结果第一感觉是需求只能通过背景当截取字符输出处理,或按JS字符处理,因为风格无法控制文本换行省略,但因为我们的移动站的版本是容器,在宽度不同分辨率的手机是不确定范围的数量,所以没有标准字符截取。例如,15字的iPhone上有两行显示,但三星,它可能不是两行显示。它可以显示一行,或者在较低的分辨率下,15个单词已经是三行。
先回头看,单行文字行文:

复制代码代码如下所示:
A20香蕉皮开发板模块-深蓝色

CSS代码


CSS代码将内容复制到剪贴板。


标题{。
宽度:150px;
身高:25px;
行高:25px;
溢出:隐藏;
朵朵的空间:不换行;
文本溢出:省略号;
}



演示
以上代码已经是标准的单文本溢出省略号的编写,在很多情况下我相信每个人都可以使用这种风格。
多行显示如何解决,后一个媚眼回来,我发现了一个API浏览器可以解决上述要求的WebKit的线夹,但是API只是Chrome浏览器支持,但不包括在W3C的标准是错误的,在这个函数只在Chrome可以用,这是一个真正的遗憾,但现在的移动终端中使用的WebKit内核,所以你可以放心的是,上述API的使用,然后看看EG的实现:

复制代码代码如下所示:
A20香蕉皮开发板模块-深蓝色

CSS代码


CSS代码将内容复制到剪贴板。


标题{。
宽度:150px;
溢出:隐藏;
文本溢出:省略号;
显示:WebKit的盒子;
WebKit的线夹:2;
Webkit框定位:垂直;
}



演示