开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

某些字体的Css线夹省略号

基础概念

CSS 线夹省略号（text-overflow: ellipsis;）是一种文本溢出处理方式，用于在文本内容超出容器宽度时显示省略号，而不是显示被裁剪的文本。它通常与 overflow: hidden; 和 white-space: nowrap; 一起使用，以实现单行文本的省略效果。

相关优势

简洁美观：省略号可以提供一种简洁的方式来表示文本被截断，避免显示不完整的单词或句子。
节省空间：在有限的空间内显示尽可能多的信息，同时保持界面的整洁。
一致的用户体验：在列表或表格等组件中，使用省略号可以保持一致的视觉效果，使用户更容易理解内容被截断。

类型

CSS 线夹省略号主要应用于单行文本的溢出处理。对于多行文本的溢出处理，可以使用 CSS 的 -webkit-line-clamp 属性（虽然这是一个非标准的 WebKit 扩展属性）。

应用场景

列表项：在列表中显示简短的描述，当描述过长时使用省略号。
表格单元格：在表格中显示较长的文本，但只显示部分内容并使用省略号表示被截断的部分。
搜索结果：在搜索结果中显示标题或描述，当内容过长时使用省略号。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Ellipsis Example</title>
    <style>
        .ellipsis {
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="ellipsis">
        This is a long text that will be truncated and replaced with an ellipsis when it overflows the container.
    </div>
</body>
</html>

参考链接

MDN Web Docs: text-overflow

常见问题及解决方法

省略号不显示：
- 确保容器有固定的宽度或最大宽度（width 或 max-width）。
- 确保 overflow 属性设置为 hidden。
- 确保 white-space 属性设置为 nowrap。
- 确保 white-space 属性设置为 nowrap。

多行文本省略：
- 使用 -webkit-line-clamp 属性（非标准，主要支持 WebKit 浏览器）。
- 使用 -webkit-line-clamp 属性（非标准，主要支持 WebKit 浏览器）。
- 使用 JavaScript 或 CSS 框架（如 Flexbox 或 Grid）来实现多行文本的省略效果。

通过以上方法，你可以有效地使用 CSS 线夹省略号来处理文本溢出问题，并在各种应用场景中提供良好的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css3制作动态的省略号原

效果如左边，完整代码如下：动态点 css...: dots-2; } .a-inspector-loader .dots span:first-child+span+span { animation-name: dots-3;//第三个点的动画名称

9002 0

CSS 样式控制溢出的数据省略号隐藏

blog.csdn.net/u011415782/article/details/79011399 § 背景近日，在规整界面时，发现有的文字因为长度和行数总是显得不尽如人意，如果考虑到用户在输入文字的随意性因素...，就更需要前端进行文字显示效果的限制了. ♩ a 标签限制行数一般是控制a 标签单行显示时，多余的文字以省略号代替 .a-article-recommend{ width:100%;...♪ p 标签限制行数 CSS实现单行、多行文本溢出显示省略号（…） .p-article-abstract{ display: -webkit-box; -webkit-box-orient...可参考：CSS实现文章 ♫ div 限制高度隐藏溢出的内容有时因为div中的内容过多，会叠加显示，造成布局的混乱，这种情况下，可以尝试进行下面的限制. .div-article-view{

1K3 0

CSS高级技巧讲解

注意：字体图标是字体不是图片使用字体图标 1.把包包里面的font文件夹复制出来一份，放在我们项目根目录。...，此时我们需要这样做把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件夹即可。...重新导入selection.json 生成新的字体包--》追加选择字体 --》点击下载 --》把之前项目中fonts删除--》替换成新的字体包里面的fonts文件夹 css三角形本质：还是利用了盒子的边框...轮廓线 outline: 0/ none; ----- 去掉轮廓线防止文本域拖拽 resize:none; vertical-align 垂直对齐方式如果让单行文本垂直居中 -- 使用line-height...1.必须强制一行显示 white-space:nowrap; 2.超出部分隐藏 overflow:hidden; 3.文字省略号代替超出的文本 text-overflow:ellipsis; 多行文本省略号显示

8873 0

05_CSS进阶技巧

我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图：把下载包里面的 fonts 文件夹放入页面根目录下在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中一定要注意字体文件路径问题...3.4.4 引入文件点击项目中下载至本地按钮，将解压的文件夹整体放入项目中，在项目中引用文件中的 iconfont.css 文件或者点击查看在线链接，生成一个在线地址直接在项目中引用 3.4.5...默认，元素放置在父元素的基线上 top 把元素的顶端与行中最高元素的顶端对齐（顶线对齐） middle 把此元素放置在父元素的中部（中线对齐） bottom 把元素的顶端与行中最低的元素的顶端对齐（底线对齐...*/ overflow: hidden; /* 3.文字用省略号替代超出的部分*/ /*ellipsis:省略号*/ text-overflow: ellipsis; 6.2 多行文本溢出显示省略号显示...Normalize.css 只作用于需要规范化的样式。

681 0

wordpress字体样式——css炫酷的字体样式实现

demo1:css实现颜色变化效果如图所示实现代码如下 <!...orange, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5); color: transparent; /*设置字体颜色透明...你在说什么( ,,´･ω･)ﾉ"(´っω･｀｡) 小结这些都是自己在使用wordpress时想要更选一点的样式效果...，整理出来的css样式，虽然现在还看不太懂，因为css真的博大精深，但是能够看得懂，然后修改成自己想要实现的效果，那就OK了，至于学的话，慢慢来。...ps:这是自己使用css实现的博客效果图

2.7K3 0

CSS中字体相关的小技巧

让我们仔细看看规范：开发者使用的字体名如果与用户使用环境中已有的某个字体名字相同，在使用样式表的文档中会有效覆盖底层字体。...我们再次参考下规范： local中放入的是一串特定格式的字符串，这串字符串用于唯一标识庞大字体族中的一套字体。...如果你使用的是Mac操作系统，打开默认的字体浏览器，Font Book，然后选择一个字体。...接下来让我们通过一些简洁明了的demo和测试用例来更好的理解一下更新：我之后不久发现System Font CSS项目在2015年使用了这种方法，好像早于Facebook的实现实例演示注：下面的demo...同样也不再需要在你的CSS中为 font-family属性赋其他杂乱的值了。简单而有效！

1.3K4 0

【CSS3】css开篇基础（5）

3.2字体图标的引入生成之后点击download 1.把下载包里面的 fonts 文件夹放入页面根目录下 2.在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中右键打开...style.css，复制如图代码引入我们自己的CSS文件中 3.html标签内添加小图标我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进标签中 mac...如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。...; } 2.表单轮廓线outline 给表单添加 outline:0; 或者outline: none;样式后，就可以去掉默认的蓝色边框 input { outline: none; } 3.防止拖拽文本域.../ overflow: hidden; /* 3.文字用省略号替代超出的部分*/ text-overflow: ellipsis; /*ellipsis:省略号*/ <!

851 0

SVN本地提交时忽略某些文件或者文件夹的相关记录

今天在使用SVN的时候遇到一个棘手的问题，至少对于我来说是的，很棘手，因为程序设置微信支付，这就意味着有密钥文件，这个文件还是自动更新的，都是在svn服务里服务器直接更新的话就会出现冲突，严重的导致svn...要在客户端提交或更新时忽略【/sdata/wxpay/wechat/key/】文件夹里的文件，可以通过以下几种方法来实现：客户端屏蔽在本地svn副本，鼠标右键，TortoiseSVN → 设置打开在弹出的设置对话框内...这个软件我没有测试过，但是效果应该是最简单的，我使用服务器端代码，参考以下。...避免提交空文件：如果 .svnignore 文件为空，可能会导致不必要的提交。确保文件中有有效的忽略规则。...通过以上两种方法，你可以有效地在客户端提交或更新时忽略指定的文件夹，避免因密钥更新导致的冲突，当然如果出现问题记得看看svn目前的状态，可能出现目录或者文件仍然处于冲突状态。

2.4K1 0

从头学前端-CSS基础05

CSS高级技巧精灵图 css sprites >为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites; > 精灵技术主要针对背景图片..., 精灵图就是一张大的背景图片 > 使用时主要移动背景图片位置，使用backgroud-position属性 > 一般情况下都是往上走，往左走，所以backgroud-position的值都是负值字体图标...iconfont > 字体图标展示的是图标，本质上是文字；可以改变颜色等属性 > 字体图标需要下载，下载地址有很多，推荐https://iconfont.cn/ CSS改变鼠标样式：图片 CSS设置表单轮廓线...三角形问题： > css画三角形主要通过边框的宽度和颜色进行设置； > 盒子宽度和高度为0 > 边框设置不同的宽度和颜色，获取不同的三角形代码如下： .vvv { display: block...初始化： > CSS初始化是指重设浏览器的样式，解决兼容性问题； > 基本上在编写CSS之前都需要进行初始化； > CSS初始化代码基本通用； CSS初始化代码：待编码

4655 0

Webpack4 搭建 Vue 项目

项目搭建创建 createVue 文件夹，进入该文件夹， npm init 初始化项目安装 webpack 四件套 npm i webpack webpack-cli webpack-dev-server..."sass-loader": "^7.1.0", CSS 后处理 postcss 两件套 "postcss-loader": "^2.1.6", "autoprefixer": "^9.1.0", 并在根文件夹创建...', 'less-loader', ], }, ] 图片 loader 解析图片，字体等都是用 file-loader，安装npm i file-loader --save-dev..."); // ...省略号 plugins: [ new MiniCssExtractPlugin({ filename: "css/[name]....}, } }, }, }) 如此配置，则打包的 js 文件夹中会多一个 vendor.js 压缩CSS和JS代码安装 optimize-css-assets-webpack-plugin

1.1K1 0

用MATLAB将多个文件夹内的某些文件汇总到另一个文件夹

为了学习Python下载了一个视频教程，可是发现是很多（13个）压缩包组成的，而不是将视频放在一个文件夹内，虽然能够快速单独解压出来，但是仍然是13个文件夹，就是下图的样子，想要看视频还得去点每一个文件夹...，甚是不便，于是想着用matlab来解决这个问题，把每个文件夹内的视频文件移动到一个新的文件夹内。...matlab代码： status=[]; % 操作状态矩阵 for i=1:13 dir_name=['Python.Django视频教程-' num2str(i)]; % 获取各个子文件夹的名称...DESTINATION的内容（是不是有点像Linux的root）。...不过呢，觉得这个意义还是挺大的，如果不是13个文件夹而是50个甚至更多（对于我这种懒人来说13个够多了~^_^~），那意义就更明显了，能够大大提高我们的工作效率。

3.5K11 0

【网页前端】CSS的基本样式边框、布局、字体

本期介绍本期主要介绍CSS的基本样式边框、布局、字体文章目录 1.边框属性 1.1border 1.2 width 1.3 height 1.4 background-color 1.5 background-image...2.布局 2.1 float 2.2 clear 3.字体 3.1 font-size 3.2 color 1.边框属性所有的 HTML 标签都有边框，默认边框不可见 1.1border 设置边框的样式...，CSS 采取了重复显示多个的策略。...） both ：同时清除左右两侧浮动的影响（一般用 both ） 3.字体 3.1 font-size 用于设置字体的大小。...3.2 color 用于设置字体的颜色。示例：效果：

1.7K3 0

前端项目知识点总结

前端总结 html 字体图标的引用添加到项目项目下载到本地加font文件夹,将字体文件放进去将css文件加入到link中雪碧图先用一个 span 标签将span标签display...: 给父元素加属性 overflow:hidden; 标签 for 属性应当与相关元素的 id 属性相同 css 宽度和高度的自适应函数 calc(100vh - 60px)函数可以用来计算css的数值...初始化可以把项目中各个部分都要用的部分提出来放在初始化的commons.css中把握整个页面的情况, 将可复用的部分写在初始化样式中初始化的时候直接加上 box-sizing: border-box...选择器 id选择器优先级太高, 在css中最好少出现垂直居中调节图片和文字的垂直: vertical-align:middle 图片下面有空隙的问题 vertical-align:top;...文本超出部分出现省略号 overflow:hidden;(溢出隐藏) text-overflow:ellipsis;(文本超出部分出现省略号) white-space:nowrap;(文本不换行)

9022 0

翻译：如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动，并添加译者的一些感想，请各位读者谅解。...: ellipsis;则表示超出盒子的部分使用省略号表示。...不过本文将要介绍的方法是采用CSS规范中的属性，并结合特殊的实现技巧完成的。...CSS实现多行文本溢出的省略号显示我们把实现的细节划分为7个步骤，在这个实现过程中最简单的就是截断文本，而最难的部分则是让一个元素处在其父包含块溢出时的右下方，并且当父元素未溢出时该元素消失不可见。...在这里不详细讲解CSS2.1规范中的几种情形，不明白的读者自行查阅。

2.8K6 0

Day8:html和css

轮廓线: outline: 0 或者为 none; 防止文本域拖拽: resize: none; vertical-align: 和行内块使用溢出文字部分显示省略号 white-space: nowrap...文字一行显示溢出部分隐藏: overflow: hidden text-overflow: ellipsis 超出部分以省略号显示字体图标iconfont icomoon字库 http...设计字体图标上次生产字体包下载兼容字体包字体引入到html // fonts iconfont.eot iconfont.svg iconfont.ttf iconfont.woff ?...demo.html ReadMe.txt selection.json style.css 上传生成字体包 http://icomoom.io http://www.iconfont.cn/ http..." href="css/index.css"/> 我是文字 <!

1.7K4 0

css 判断在支持某些属性的情况下再添加样式

、、 js 判断 window.CSS && CSS.supports('padding: env(safe-area-inset-top)')

471 0

HTML内超过多少像素以省略号显示

很多时候都有这种需求，页面上的文字显示不下，需要以省略号代替，可能有些人会想到通过控制文字的长度实现，的确，在已知的文字样式下，如果文字全是中文或者全是非中文是可以通过长度来控制的，但是我们的情况通常是中英文混合...截取字符串，超出用省略号代替通过CSS控制不需要改变文本本身，可以在页面渲染的时候就控制如何显示了，并且可以通用，缺点是只能在文字尾部加省略号...，但有的时候我想要这种格式，“测试-看我有多长看我....doc”，如果文本过长的话，.doc前的文本加省略号，保留格式标志，这种CSS就无法控制了。 ...通过改变要显示的文本，前提是动态网站，思路是后台语言取得文本内容后，在显示在前台前，根据页面当前字体样式动态改变文本。...通过JavaScript计算 function test() { var info = "CSS截取字符串，超出用省略号代替"; var temp = info;

1.3K0 0

突破限制，CSS font-variation 可变字体的魅力

scale 是等比例放大缩小一个物体，而仔细观察上述效果，明显是有字体的粗细、字体的字宽的变化。这里，其实用到了 CSS 比较新的特性 -- 可变字体，也就是 font-variation。...本文，将借助这个效果，介绍一下什么是 CSS font-variation。什么是 CSS font-variation，可变字体？...从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。我们只需通过CSS与一行 @font-face 引用，即可获取包含在这个单一文件中的各种字体变体。...静态字体的局限性举个例子，在 Google Font，我随便选取一个标准静态字体，实现一个字体 font-weight 的变化动画： CSS font-variation CSS...理解 font-variation-settings 除了直接通过 font-weight 去控制可变字体的粗细，CSS 还提供了一个新的属性 font-variation-settings 去同时控制可变字体的多个属性

1.2K1 0

前端：CSS字体大小 px、em、rem的区别

通常来说分辨率越高的屏幕 DPI也就越高，所以高分辨率屏幕显示的图标和字体都要更小一些。所有浏览器的默认字体大小都是 16px。...px的特点 IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE...2、em em（font size of the element）是指相对于父元素的字体大小的单位。...所以默认情况下 1em=16px EM特点 em的值并不是固定的； em会继承父级元素的字体大小。 3、rem rem和 em相似，但是 rem是相对于根元素的字体大小单位。...：字体大小之px、em、rem、pt,字号详解：https://www.cnblogs.com/zhaowy/p/8400271.html vw vh视口百分比：https://blog.csdn.net

2.2K1 0

flutter 之Text介绍

文本作为UI最基本的元素，最基本的用法有这些：字体文字大小、颜色一些常用样式，比如倾斜，加粗，下划线，删除线等文字超出边界之后如何显示文字的单行，多行控制文字的显示方向富文本的显示文字渐变...，样式，比如线的实现，还是虚线，还是波浪线等; 对于这些装饰，还可以设置双下划线，点线等效果。...text_underline_double 2.3.4 文字超出边界如何显示超出边界的显示有三种类型：显示省略号直接截断渐隐这几种显示样式都是通过overflow属性控制的： ListTile...自定义字体的步骤如下 1. 导入字体文件将字体文件放在项目根目录下的 assets 文件夹中。...在代码中设置默认字体或将字体用于特定 Widget 关于如何应用这些字体，你有两种选择：将其设为默认字体，或者仅在某些特定 Widget 中使用。

1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭