首页
学习
活动
专区
工具
TVP
发布

CSS 控制内容显示行数

代码示例 ---- 显示一行内容,超出部分使用省略号表示(只有块元素才会生效) .nowrap { white-space: nowrap; text-overflow: ellipsis; overflow...: hidden; } 显示两行内容,超出部分使用省略号表示 .line-clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box...; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 显示行数 */ } 解决英文和数字不会自动换行的问题 word-break: break-all...代码解析 ---- -webkit-line-clamp 用于限制块元素显示文本的行数,它是一个不规范的属性,没有出现在 CSS 规范草案中。...为了实现限制文本的行数,需要组合其他 webkit 属性,常见结合属性: /* 将对象作为弹性伸缩盒子模型显示 */ display: -webkit-box; /* 设置或检索伸缩盒对象的子元素的排列方式

2.6K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS overflow 内容溢出时的显示方式

自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时,无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值 描述 visible 默认值。...内容不会被修剪,溢出部分会呈现在元素框之外 hidden 内容被修剪,溢出部分不可见 scroll 内容被修剪,无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条,没有溢出时不显示滚动条...自定义 overflow 的滚动条 ---- 以前不知道 overflow 的滚动条样式是可以修改的,最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式,得知还有这么个东西,在此记录一下自定义滚动条的写法...,这样可以更好的理解用法,虽然下次使用还要来这里看 首先,先来做一个滚动条的容器 .container { width: 260px; height: 100px; background

2.1K20

图解串一串 webpack 的历史和核心功能

至此,你可以在 js 文件里引入 css 文件等: import aa from 'aa'; import '....之前 cssjs 是分离开的,两者各自编译,然后 js 做打包,最后在 html 里引入两者的产物。 现在 cssjs 关联关系,可以基于这个实现 css 的模块化。...这种功能的实现,就是基于在 js 里引入了 css 实现的。 不然都不知道两者的关联关系,怎么做 css 模块化? 当然,用命名空间来隔离 css 的方式做模块化也可以,比如 bem 命名规范。...然后在 vscode 里把组件改了: 这时候页面中显示内容也改了,但是没刷新: 因为如果刷新就这样了,会把 console 里的东西清空: 这就是 hmr,模块热替换。 它是怎么实现的呢?...jscss 紧密关联,出现了 css modules 这种根据 js 模块和 css 关联关系做的 css 模块化方案。

17020

浏览器渲染页面与DOM相关常见的面试题以及问题

HTML 浏览器发送请求,以获取嵌入在HTML中的对象,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签,这时,浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源...3.Render Tree: 将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为Attachment)。...4.layout: 了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。   ...两个css属性,display: none和visibility: hidden,前者会导致重排和重绘,后者会导致重绘。这是后者的优点,但缺点是此节点一直保存在内存中,占用资源。...构建DOM树是一个渐进过程,为达到更好用户体验,渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后开始构建render数和布局。

1.1K30

构建工具Gulp-lesson3

监控文件: gulp 对外暴露了 watch 函数来提供文件监控的支持,如下所示: 当 src 目录下的 css 文件修改动作后将触发对应的css 构建任务; 当 src 目录下的 js 文件修改动作后将触发一组串行任务...(cb) { // body omitted cb(); } // 可以只关联一个任务 watch('src/*.css', css); // 或者关联一个任务组合 watch('src/*....// body omitted cb(); }); 注:上面的代码来自 gulp 官网; 立即执行: 在调用 watch 后所关联的任务默认不会立即触发执行,而是需要等第一次触发文件变化的事件后执行...const { watch } = require('gulp'); // 每次文件修改之后关联任务都将执行(可能并发执行) watch('src/*.js', { queue: false },...const { watch } = require('gulp'); // 文件第一次修改之后要等待 500 毫秒执行关联的任务 watch('src/*.js', { delay: 500 },

26830

HTML是什么?

而其他后缀的结尾的网页相对来说就是动态网页页面,动态页面是经过服务器对各自的程序翻译处理、数据库操作等处理然后由浏览器把服务器处理完的数据程序给用户,而网页内容数据可以随后台数据改变而改变。...2、“”后接着是“”页头,其在中的内容是在浏览器中内容无法显示的,这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域,而里面“”后接着是“”页头,其在中的内容是在浏览器中内容无法显示的,这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域,而里面“ 标签位于文档的头部,不包含任何内容。标签的属性定义了与文档相关联的名称/值对。...在html中使用最多的布局标签为div,加上对网页设置css样式,所以通常我们就说div+css制作即使div标签+css样式实现网页布局重构。

1.8K30

JS相关概念

1、CSSJS在网页中的放置顺序是怎样的? (1)CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后开始渲染页面,将内容呈现在页面上。...而body标签中的则不阻塞任何内容显示,会出现FOUC无样式内容闪烁。 对于IE/Edge。...未加载完成的标签只阻塞其后面的HTML内容显示,而对其前面的HTML内容则不阻塞,所以如果将CSS放在前面head里则和Chrome一样,如果放body里则会出现...因为在加载 JavaScript时会阻止其他内容的下载,要等到JS文件下载解析完之后才会显示网页内容。若JS文件很大放在前面就会导致加载时间较长,网页会一直白屏。...而IE、Chrome、Safari则是在全部的样式表完全加载下来之后开始渲染页面样式将内容呈现在页面上,没下载完之前页面是空白的。

1.5K20

浏览器原理

如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。 网络:用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。...1.4 cssjs解析过程 1.4.1 css解析 解析CSS会产生CSS规则树,前面已经说到,html不是与上下文无关的语法,而cssjs是与上下文无关的语法,所以常规的解析方法都可以用。...(Frame Tree)关联上完成样式计算 Webkit:把Style对象直接存在了相应的DOM结点上了 样式被js改变过的话,会重新计算样式(Recalculate Style)。...另外,img要等待css加载完解码,所以css阻塞图片的呈现,类似于js阻塞html解析一样。可以想一下,如果css被设置为display:none,还有意义吗?...平时我们把link标签放部头而script放body尾部,因为js阻塞阻塞DOM树的构建。但是js需要查询CSS信息,所以js还要等待CSSOM树构建完可以执行。

1.9K21

系统性的前端知识

DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。...也就是在DOM上有HTML与CSS数据,同时JavaScript的事件处理是关联到DOM结点上的。由此三者真正结合在了一起,成为了前端的三个技术的有机结合。 然后就是前端的重点在那儿?...HTML完成了前端的数据定义,CSS完成了显示的式样。只有JavaScript完成了动态内容。...而动态、交互差不多是现在整个前端的工作最集中的部分,不像HTML、CSS刚出现的时候,那时只注重单纯的内容显示。现在是一个交互的时代。...只有不断的思考这其中的应用,你算是真正的入门了前端,变成了一个真正的合格的开发人员。而不是一个前端搬砖的。

19610

渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。 网络:用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。...1.4 cssjs解析过程 1.4.1 css解析 解析CSS会产生CSS规则树,前面已经说到,html不是与上下文无关的语法,而cssjs是与上下文无关的语法,所以常规的解析方法都可以用。...(Frame Tree)关联上完成样式计算 Webkit:把Style对象直接存在了相应的DOM结点上了 样式被js改变过的话,会重新计算样式(Recalculate Style)。...另外,img要等待css加载完解码,所以css阻塞图片的呈现,类似于js阻塞html解析一样。可以想一下,如果css被设置为display:none,还有意义吗?...平时我们把link标签放部头而script放body尾部,因为js阻塞阻塞DOM树的构建。但是js需要查询CSS信息,所以js还要等待CSSOM树构建完可以执行。

4.7K41
领券