前端多行文本末行打点

最新推荐文章于 2024-09-22 17:15:58 发布

oo灵性

最新推荐文章于 2024-09-22 17:15:58 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 前端文章标签：前端

本文链接：https://blog.csdn.net/u010427666/article/details/53099098

版权

本文介绍了前端如何处理多行文本末尾打点的效果，特别是在英文和中文字符长度不同的情况下。通过计算中文字符长度并进行截取，可以达到理想的展示效果。提供了一段代码示例及在线实现链接供参考。

摘要由CSDN通过智能技术生成

很多时候我们要实现如何的打点效果，可是英文字符和中文字符长度时不一样的，这个时候该如何实现如下效果呢？

网易云音乐的描述
酷我音乐母带落地页

至于展出操作应该是前端都能够处理的。
应该都知道英文占1个字符，中文汉字占2个字符。
将中文的字符长度按2个的位字符算出，然后想办法进行截取。
算出位字符长度：

      //  计算字符长度
      function  getStrlength(str){
   
          return str.replace(/[^\x00-\xff]/g,"aa").length;
      }

参考链接计算字符长度</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

oo灵性

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端实例知识点-多个并行的DIV实现高度一致

ccsawcc的博客

01-11

1万+

博客前言：做为一个程序员，在复杂的工作环境中总要学着去承担更多的责任，和接触更广泛的知识。然而在接触新区域时，一个小白总是为自己能钻研出一点点东西感到十分兴奋，为了让这份成就感附属的知识点留给自己，决定记录下来这些小知识点（敲黑板，期末要要考...）。可以方便以后查阅，还有可能分享给遇到同样问题的同学们。前端知识点（一）：多个并行的DIV实现高度一致我的前端启蒙来源于工作初期的

微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能

10-16

主要介绍了微信小程序多行文本显示...+显示更多按钮和收起更多按钮,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

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

css 多行打点

qq_43436432的博客

12-07

1104

原文链接：https://blog.csdn.net/c_kite/article/details/81486953 width: 100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; //行数 -webkit-box-orient: vertical; ...

菜鸟教程-HTML总结

最新发布

2301_79553204的博客

09-22

2178

一.HTML简介与注意事项 HTML（超文本标记语言），是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。HTML文档也叫做web 页面 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签对于中文网页需要使用<m

多行打点展示/单行打点展示

qq_43773083的博客

05-07

422

多行打点展示 /* box的高度 */ height: 100rpx; /* 超出隐藏 */ overflow: hidden; /* 设置盒子样式，-webkit-是兼容前缀 */ display: -webkit-box; /* 设置盒子参考方式 */ -webkit-box-orient: vertical; /* 设置超出多少行显示省略号 */ -w...

多行文本溢出打点

小李不吃肉

08-08

540

首先单行文本溢出打点方法（三件套） div{ width:100%; overfllow:hidden; text-overflow:ellipsis; white-space:nowrap; } -wenbkit-line-clamp文字占几行 box-orient 属性规定框的子元素应该被水平或垂直排列。horizontal为水平多行文本打点 div{ width: 100px;d disp...

css多行做打点

qq_40860137的博客

07-15

5805

.overflow{ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; //行数 -webkit-box-orient: vertical; display: -webkit-box; }

梁漱溟乡村本末考证.doc

10-03

梁漱溟乡村本末考证.doc

宋史记事本末王安石变法.doc

10-03

【知识点】 1. 王安石变法：王安石是北宋时期的重要政治家、思想家和改革家，他在仁宗嘉佑五年被召为三司使支判官，后推行了一系列重大改革，被称为“王安石变法”或“熙宁变法”。这一变法是中国历史上的重大事件...

2022届高考文言文阅读专题专练之《资治通鉴本末刘裕灭南燕》挖空及跟踪练习.docx

02-12

### 2022届高考文言文阅读专题专练之《资治通鉴本末刘裕灭南燕》知识点解析 #### 背景介绍本文选自《资治通鉴》，讲述了东晋末年刘裕征讨南燕的故事。通过分析文中的历史事件和人物言行，我们可以从中学习到许多...

css多行实现打点

记录点滴

06-05

1089

针对现代浏览器、移动端、小程序实现多行打点： <style> .box{ width: 200px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } </style> <div class="box"> 旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSD

(单行/多行)文本溢出打点显示

即使萍水也不要相逢的博客

02-25

1204

1.单行文本溢出打点显示 /*文本不换行*/ white-space: nowrap; /*超出范围隐藏*/ overflow: hidden; /*文字超出用省略号*/ text-overflow: ellipsis; 2.多行文本溢出打点显示-限制文本行数 overflow: hidden; text-overflow: ellipsis; /*将对象作为弹性伸缩盒子模型显示*/ display: -webkit-box; /*用来限制在一个块元素中显示的文本的行数*/ -webk

html前台多文本框布局,网页前端（5）表单及表格

weixin_34640687的博客

06-04

802

表单的基本设置表单现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这些都是表单的一种。网页中的表单是用来向服务器提交信息的，我们最常用到的表单就是baidu的搜索框。在搜索框填入关键字后，点击搜索按钮，关键字会提交到baidu的服务器，服务器根据用户输入的关键字进行检索，返回相应信息表单项>文本框密码框多选框单选框提交按钮下拉...

处理文字溢出和多行打点

jizhuangzhuang_的博客

12-18

223

处理文字溢出和多行打点(附：stylus版) 注意：首先你的编辑器要支持stylus 文字溢出： .hide{ width: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 多行打点： .hides{ width: 20px; overflow: hidden; text-...

多行文字溢出，最后一行点点点

Luckyzhoufangbing的博客

05-02

1319

做项目的时候遇到了这个问题：当时需求是标题两行，最后一行溢出部分多余的点点点……实现方案一：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&g

前端css怎么做成多行省略

weixin_42551915的博客

11-19

187

单行省略很简单 overflow: hidden; text-overflow: ellipsis; white-space:nowrap 多行省略就有兼容问题了，要使用 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; ...

单行/多行文本换行打点省略、清除浮动、文字代替图片

AIWWY的博客

09-21

362

1.单行文本换行打点省略 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2.清除浮动 ::after{ content: ''; display: block; clear: both; }

vue css 多行打点展示

菜鸡的博客

03-30

404

css样式 -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; display: -webkit-box; 生产打包问题原因：css的这个-webkit-box-orient属性在打包的时候会丢失解决方案如下 <template lang="pug"> .sub-notice(:sty...

CSS 结合变量实现动态多行溢出打点

如果有了可惜

09-03

371

多行打点 display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;

HTML文件中的信息隐藏实验与Snow工具应用

1. 实验原理：Snow是一种能够在ASCII文本末行进行信息隐藏的工具，通过插入制表位和空格的方式使得隐藏的数据在浏览器中不易察觉。其工作原理是利用特定编码将秘密信息转换成非可视字符，如ASCII码中的特殊字符或...