css中的文本溢出属性

简介: css中的文本溢出属性

一 、容器溢出相关的属性

1、溢出属性(容器的)

说明:

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值,溢出内容会显示在元素之外,

hidden: 溢出内容隐藏;

scroll: 滚动,溢出内容以滚动方式显示

auto: 如果有溢出会添加滚动条,没有溢出正常显示

inherit: 规定应该遵从父元素继承overflow属性的值。

overflow-x:X轴溢出; overflow-y:Y轴溢出

2、空余空间

说明:

white-space: normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白normal: 默认值,空白会被浏览器忽略,

nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止

3、省略号显示

说明:

text-overflow:clip/ellipsis ;

clip: 默认值,不显示省略号 (...) ;

ellipsis: 显示省略标记;

当单行文本溢出显示省略号需要同时设置以下声明:

1、容器宽度: width: 200px;

2、强制文本在一行内显示:white-space: nowrap;

3、溢出内容为隐藏: overflow: hidden;

溢出文本显示省略号: text-overflow: ellipsis

扩展知识点:实现多行文本溢出时产生省略号

display: -webkit-box; -webkit-box-orient: vertical:

webkit-line-clamp: 3: overflow: hidden:

1、-webkit-line-camp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:2、display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。

3、-webkit-box-orient 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式

舌用范围:

因使用了Webkit的CSS扩展属性,该方法适用于WebKit浏览器及移动端,但文字未超出行的情况下也会出现省略号,可结合is优化该方法


相关文章
|
6天前
|
前端开发
了解 css中 backface-visibility 属性
了解 css中 backface-visibility 属性
13 0
|
8天前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
16 4
CSS常用滤镜属性讲解
|
8天前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
18 2
了解 css中 backface-visibility 属性
|
4天前
|
前端开发
使用CSS样式化占位文本
使用CSS样式化占位文本
4 0
|
4天前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
6 0
|
6天前
|
前端开发
CSS常用滤镜属性讲解
CSS常用滤镜属性讲解
14 0
|
1月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
39 0
学习css的clip-path属性
|
18天前
|
前端开发 容器
CSS实现多行文本的展开收起
CSS实现多行文本的展开收起
9 0
|
1月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
1月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
27 0