多行文本超出显示省略号

wangooo

于 2024-01-05 12:52:36 发布

阅读量824

点赞数 9

分类专栏： css vue 文章标签： css

本文链接：https://blog.csdn.net/wangooo/article/details/135406810

版权

vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

多行超出省略号

 <style>
   .content {
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
</style>

单行超出省略号

<style>
    .text1 {
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
    }
</style>

https://juejin.cn/post/6947939277032390669

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wangooo

关注关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
多行文本超出显示省略号

【代码】多行文本超出显示省略号。
复制链接

扫一扫

专栏目录

多行文本末尾溢出文字显示省略号问题

FengziTianYu的专栏

04-19

614

问题我之前作为开发者、亦或者作为一个先行者，都被问过很多次一个问题：“多行文本末尾的溢出怎么搞定？”。说实话我对css理解的的确一般，但是对我个人而言我第一个想到的办法永远都是： { overflow:hidden; text-overflow:ellipsis; white-space：nowrap } 但是这种写法带来的效果是无论你的文本内容又多少，都...

显示一行或多行文本超出用省略号表示

xiaoyuer_2020的博客

06-03

510

文本显示一行 text-overflow 属性规定当文本溢出包含元素时发生的事情。默认值clip，是修剪文本，ellipsis是显示省略符号来代表被修剪的文本。这里主要用到的是 text-overflow: ellipsis; 注意：text-overflow:ellipsis; 不可独立使用必须结合overflow:hidden; white-space:nowrap;才生效。 <!DOCTYPE html> <html> <head> <st

参与评论您还未登录，请先登录后发表或查看评论

单行、多行文本超出显示省略号

zzzz121380的博客

08-04

1753

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp；注意：这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。...

微信小程序多行文本超出显示省略号

m0_67448414的博客

08-02

1276

单行多行文本省略解决办法

微信小程序实现多行文字超出部分省略号显示功能

10-16

主要介绍了微信小程序实现多行文字超出部分省略号显示功能，比如设置只显示2行，超出部分省略号显示，本文通过实例代码给大家介绍,需要的朋友可以参考下

移动端的text-overflow多行文本溢出显示省略号(…)

12-10

`：确保文本超出范围时显示省略号。示例代码如下： ```css .container { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 显示3行 */ overflow: hidden; text-overflow: ...

单/多行文本添加省略号方法详解

12-11

对于多行文本末显示省略号，由于CSS标准不支持跨多行的文本截断，我们通常需要依赖特定浏览器的私有属性，例如WebKit浏览器的`-webkit-line-clamp`和`-webkit-box`。以下是一个例子： ```css p { width: 200px; ...

css多行文本溢出时出现省略号的示例

09-24

主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue 字符串中加多个空格

wangooo的博客

06-25

9695

在字符串中添加字符，添加的空格的字符是："\xa0"，即 \u00A0 不间断空格\u00A0 let sepDot = '\xa0 • \xa0'; 三种空格unicode （ \u00A0，\u0020，\u3000 ） 1.不间断空格 \u00A0 2.半角空格(英文符号) \u0020，代码中常用的 3.全角空格(中文符号) \u3000，中文文章中使用 ...

vue项目运行报错 node_modules/.bin/vue-cli-service: Permission denied

wangooo的博客

09-07

9411

vue项目运行 npm run serve 报错 sh: /Users/wang/WebstormProjects/test_web/node_modules/.bin/vue-cli-service: Permission denied npm ERR! code ELIFECYCLE npm ERR! errno 126 npm ERR! huischoll@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 126 npm ERR!.

span \n 换行

wangooo的博客

08-19

9288

字符串中包含\n或<br/>等换行符号，但是前端渲染时候却并没有真正的换行。 white-space:pre-wrap; .comment{ white-space:pre-wrap; }

el-select clearable 清空后数据为空串

wangooo的博客

09-28

8699

看源码是这样的 handleClearClick(event) { this.deleteSelected(event); }, deleteSelected(event) { event.stopPropagation(); const value = this.multiple ? [] : ''; this.$emit('input', value); this.emitChange(value); this.visible = false;

el-table 高亮某一行

wangooo的博客

06-22

6849

使用 highlight-current-row 属性 el-table 加上 highlight-current-row 属性。 <el-table ref='tTable' :data="dataList" highlight-current-row></el-table> 调用setCurrentRow(row, true) 设置当前行高亮，row为dataList里面的数据。 selectRow(row) { if (row) { th.

el-table 自动滚动到对应的行

wangooo的博客

06-22

6175

el-table 当当前行不在显示的区域中时，将当前行自动滚动到显示区域的上方。 300是显示区域的高度，-300是防止每次当前行发生变化时，当前行都要滚动到显示区域的上方。这样只有当当前行不在显示区域中时，才会滚动到显示区域的上方。 updateSpeakSentenceRow() { let curIndex = 0; // 如果当前索引变化 if (curIndex !== this.curSentenceRowIndex) { .

css定位属性position:fixed

最新发布

wangooo的博客

01-02

2716

Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。

vue项目 ESLint: ‘item‘ is defined but never used

wangooo的博客

09-08

1789

ESLint: 'item' is defined but never used.(no-unused-vars) 在 package.json中，找到 eslintConfig ，在 rules 里添加 "no-unused-vars": "off"

vue cli3 配置多个环境

wangooo的博客

08-30

1224

在项目开发的各个阶段，比如：开发环境、测试环境、生产环境，我们需要为项目指定不同的一些配置信息。比如接口api的域名，在开发环境中是开发服务器，在上线之后需要切换到正式服务器。这个时候我们就需要管理环境下的配置文件信息。 env文件说明 .env：默认全局配置文件 .env.local：本地覆盖。除 test 之外的所有环境都加载此文件 .env.development, .env.test, .env.production：特定环境配置文件 .env.development.local, .

vue 下载模版文件

wangooo的博客

09-06

636

从后台接口中返回的类型是 blob download() { let params = { } this.$axios({ method: 'get', responseType: 'blob', //防止返回乱码 url: this.baseUrl + '/download/template', params: params }).then.

多行文本超出显示省略号效果怎么实现

07-16

要实现多行文本超出显示省略号的效果，可以使用CSS的属性`text-overflow`和`-webkit-line-clamp`。首先，给文本容器（例如`<div>`或`<p>`元素）设置以下样式： ```css .container { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 设置显示的行数 */ -webkit-box-orient: vertical; } ``` 上述代码中，`overflow: hidden;`用于隐藏超出容器的内容，`text-overflow: ellipsis;`用于在文本溢出时显示省略号。接下来，使用`display: -webkit-box;`和`-webkit-line-clamp: 3;`将文本容器限制在指定的行数（例如3行）内，并使用`-webkit-box-orient: vertical;`设置文本垂直排列。请注意，`-webkit-line-clamp`是一个WebKit私有属性，只在WebKit内核的浏览器中生效（如Chrome、Safari）。如果需要兼容其他浏览器，可以考虑使用JavaScript来实现类似的效果。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交