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


相关文章
|
21天前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
20 0
|
21天前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
10 0
|
3天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
4天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
6 1
|
13天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
14天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
23天前
|
前端开发
CSS列表属性
CSS列表属性。
18 5
|
24天前
|
前端开发 UED
CSS cursor的一些相关属性
CSS cursor的一些相关属性
|
25天前
|
前端开发
css的一些属性
css的一些属性
|
28天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0