控制文字行数以及用省略号代替被修剪文本

在文字内容很多的情况下,且这些内容还会影响到盒子大小,这时候我们就需要限制盒子宽和高,但内容的显示又不是很美观,这时候我们就可以通过以下这些代码来修饰内容显示效果

.content{
	width:100%;
	height: 34px;
        overflow: hidden;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}

width:100%;-----盒子的宽度

height:34px;-----盒子的高度(跟显示几行有关系)

overflow:hidden;-----内容超出隐藏

text-overflow:-o-ellipsis-lastline;

text-overflow:ellipsis;-----显示省略符号来代表被修剪的文本。

display:-webkit-box;

-webkit-line-clamp:2;-----限制几行

-webkit-box-orient:vertical;

时间: 2024-10-25 09:15:58

控制文字行数以及用省略号代替被修剪文本的相关文章

CSS控制LI行字符溢出用省略号代替

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

控制容器文字行数(pc和 移动端)

写在前面的话: 对于文字的单行以及多行显示,应该是经常用到的一个功能了,看下文吧~ pc 端: 1. 单行限制(兼容所有浏览器)   这里加了一个 鼠标移入时显示全部 的效果: .p2{ border: 1px solid #000; width: 206px; white-space:nowrap; overflow: hidden; text-overflow:ellipsis; } .p2:hover{ white-space: normal; overflow: visible; } <

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定,这个很常见.但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制...等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏. text-overflow

HTML学习笔记7——CSS控制文字的一些基本属性的使用

CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:underline:下划线 overline;上划线 Line-though;删除线 字与字之间的距离:letter-spacing:10px; ……(还有很多属性,可通过查找手册了解相关知识) 二.CSS控制字的大小字体及颜色 字体的颜色:color:blue:蓝色 斜体效果:font-style:i

[寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件

RichTextEx一款通过HTML标签控制文字样式的富文本控件 原创文章,欢迎转载.转载请注明:文章来自[寒江孤叶丶的Cocos2d-x之旅系列] 博客地址:http://blog.csdn.net/qq446569365 下载地址 Github链接 这个是干什么的 将例如以下文字内容 "<#F37C2A><font Helvetica><30>[世]<#3AB5B3><underLine true>寒江孤叶<underLine

CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果: 原文地址:https://www.cnblogs.com/zzz-knight/p/11644912.html

自定义滚动条——控制文字的滚动

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 {

设置一个DIV的文字超出隐藏,并用省略号表示未完待续

<div style="width:50px;height:18px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续</div>

C/C++ 获取代码执行的行数以及文件名

#include <iostream>#include <string>using namespace std; void _tmain(int argc, TCHAR *argv[]){ int line = __LINE__; string filename = __FILE__; cout<<"the line is:"<<line<<endl; cout<<"the filename is :&q