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优化该方法


相关文章
|
2月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
2月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
31 0
|
2月前
|
前端开发
CSS属性
CSS属性
29 0
|
6天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
9 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
27 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
26天前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
6天前
|
前端开发
css简写属性
css简写属性
13 0
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
64 28
|
22天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
11 0
|
22天前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
16 0