css换行文字隐藏,css 文本换行 文本溢出隐藏用省略号表示剩下内容

正常文本的显示

p{

width: 300px;

box-shadow: 0 0 10px #ccc;

padding: 0 20px;

margin: 20px 100px;

}

手指轻轻敲打着键盘，一句句，一行行，一段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在心底的那抹温柔，还没泯灭，才会一次次敲下这些落寞的字迹。

强制不换行

p{

width: 300px;

box-shadow: 0 0 10px #ccc;

padding: 0 20px;

margin: 20px 100px;

white-space: nowrap;

}

手指轻轻敲打着键盘，一句句，一行行，一段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在心底的那抹温柔，还没泯灭，才会一次次敲下这些落寞的字迹。

溢出隐藏 并用省略号表示

p{

width: 300px;

box-shadow: 0 0 10px #ccc;

padding: 0 20px;

margin: 20px 100px;

white-space: nowrap; /* 不换行 */

overflow: hidden; /* 溢出隐藏 */

text-overflow: ellipsis; /* 溢出内容由省略号表示 */

}

手指轻轻敲打着键盘，一句句，一行行，一段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在心底的那抹温柔，还没泯灭，才会一次次敲下这些落寞的字迹。

设置文本行数 溢出隐藏

p{

width: 300px;

box-shadow: 0 0 10px #ccc;

padding: 0 20px;

margin: 20px 100px;

word-break: break-all;

display: -webkit-box;

-webkit-line-clamp: 3; /* 指定行数*/

-webkit-box-orient: vertical;

overflow: hidden;

}

手指轻轻敲打着键盘，一句句，一行行，一段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在心底的那抹温柔，还没泯灭，才会一次次敲下这些落寞的字迹。

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

一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

多行溢出隐藏显示省略号功能的JS实现

在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...

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

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

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

为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:

CSS控制Span强制换行、溢出隐藏

CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图

规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

ant Table td 溢出隐藏(省略号)

1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...

css 文字溢出隐藏 带省略号

.demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置

css强制换行和超出隐藏实现

一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...

随机推荐

Python爬虫Dota排行榜爬取

1.分析网站 打开开发者工具,我们观察到排行榜的数据并没有在doc里 doc文档 在Javascript里我么可以看到下面代码: ajax的post方法异步请求数据 在 XHR一栏里,我们找到所请求的 ...

基于 HTML5 WebGL 的 3D SCADA 主站系统

这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 的模拟一般需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项 ...

最长k可重线段集问题

和那道可重区间集一样 不过这道题可能有垂直于x轴的线段,这就很烦了,直接连会有负环,判掉又会WA 可以想办法把r端点和l端点分开,又要保证答案不变 那么直接把区间l,r都乘以2,l=r时r++,否则l ...

gradle入门(1-8)gradle 的依赖查看、依赖排除和指定版本(需要验证！)

一.依赖查看 gradle dependencies 在gradle dependencies输出会有如下几种标记: 1.版本 : 唯一的依赖. 2.版本():还存在该库其他版本的依赖或者间接依赖,并 ...

Dancing Links 学习笔记

Dancing Links 本周的AI引论作业布置了一道数独 加了奇怪剪枝仍然TLE的Candy?不得不去学了dlx dlxnb! Exact cover 设全集X,X的若干子集的集合为S.精确覆盖是 ...

kendo upload必填验证

@using Kendo.Mvc.UI @using StudentManage.Common.Helper @model StudentManage.Models.Home.ImportDataFr ...

统计cpu相关信息

我的cpu为i3310m 适用类型:笔记本 CPU系列:酷睿i3 3代系列 CPU主频:2.4GHz 三级缓存:3MB 插槽类型:FCBGA1023,FCPGA988 封装大小:37.5×37.5mm ...

petapoco 对存储过程的扩展 干货

好久没发表文章了.心血来潮,简单的介绍下这次工作中的问题. 项目中运用了Petapoco,可是petapoco对存储过程的支持不够好.或者说对于某些特殊场景,petapoco的sql支持度有限. 比如 ...

request_irq与request_threaded_irq

/* * Allocate the IRQ */ #if 0 retval = request_irq(uap->port.irq, pl011_int, 0, "uart-pl011 ...

html5中的SessionStorage 和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...