开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js文字中间省略

在JavaScript中实现文字中间省略（也称为“文本溢出省略”）通常涉及到CSS和HTML的结合使用，但也可以通过JavaScript进行更复杂的控制。以下是关于文字中间省略的一些基础概念、优势、类型、应用场景以及如何解决的问题。

基础概念

文字中间省略是指当文本内容过长时，不在文本的开始或结束位置截断，而是在中间部分截断，并添加省略号（...），以表示文本被截断。

优势

用户体验：避免文本溢出导致的布局混乱。
信息展示：在有限的空间内展示尽可能多的信息。
美观性：保持页面整洁，避免因文本过长而影响整体设计。

类型

CSS实现：使用CSS的text-overflow属性结合white-space和overflow属性。
JavaScript实现：通过JavaScript动态计算文本长度，并在中间插入省略号。

CSS实现示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Ellipsis</title>
    <style>
        .ellipsis-middle {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
        }
        .ellipsis-middle::after {
            content: '...';
            position: absolute;
            right: 0;
            background: linear-gradient(to left, transparent, white 50%, transparent);
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div class="ellipsis-middle">
        这是一个非常长的文本示例，用于展示如何在中间省略文本。
    </div>
</body>
</html>

JavaScript实现示例

function truncateMiddle(str, maxLength) {
    if (str.length <= maxLength) {
        return str;
    }
    const halfLength = Math.floor(maxLength / 2);
    const start = str.slice(0, halfLength);
    const end = str.slice(-halfLength);
    return `${start}...${end}`;
}

const longText = "这是一个非常长的文本示例，用于展示如何在中间省略文本。";
const truncatedText = truncateMiddle(longText, 10);
console.log(truncatedText); // 输出: "这是一个...文本示例"

应用场景

新闻标题：在新闻列表中，标题可能非常长，使用中间省略可以保持列表的整洁。
用户名：在用户列表或评论中，用户名可能很长，使用中间省略可以避免布局问题。
描述文本：在产品列表或文章摘要中，描述文本可能很长，使用中间省略可以在有限的空间内展示更多信息。

遇到的问题及解决方法

省略号位置不准确：使用CSS实现时，省略号的位置可能不准确，可以通过调整CSS样式来解决。
文本截断不自然：使用JavaScript实现时，文本截断可能不自然，可以通过调整截断逻辑来解决，例如考虑单词边界。

通过以上方法，可以在JavaScript中实现文字中间省略，提升用户体验和页面美观性。

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

有帮助

没帮助

相关·内容

JS控制文字只显示两行，超出部分显示省略号

由于使用css控制文字只显示多行，超出部分显示省略号，存在一定的兼容性问题，所以总结了一下网上一些大咖使用js实现控制行数的解决方案。...第一步：依次引入jquery.js+jquery.ellipsis.js+jquery.ellipsis.unobtrusive.js。...（1）jquery.js源代码下载 http://jquery.com/ （2）jquery.ellipsis.js 源代码可以通过该部分修改默认的行数，修改row的值即可。...options.callback.call(this); }); return this; }; }) (jQuery); （3）jquery.ellipsis.unobtrusive.js...; 第二步：需要一个装载内容的容器，并在其上添加属性data-toggle="popover"，data-ellipsis="true"，data-toggle的值可以定义成其他的值，只需后续与调用的js

4.3K4 0

table文字溢出显示省略号问题

table文字溢出显示省略号问题今天遇到一个css样式问题：如题，在table里面，th 的文字如果太长的话，想要显示省略号会使用下面三行代码： overflow: hidden;text-overflow...设置属性宽度和 table-layout:fixed; table { width: 100%; table-layout:fixed;} 注意：table必须设置 table-layout:fixed; ，文字溢出省略才能生效

1.2K2 0

CSS控制文字，超出部分显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。...但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。...适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。注：将height设置为line-height的整数倍，防止超出的文字露出。...给p::after添加渐变背景可避免文字只显示一半。...CSS设置一行文字，超出部分自动隐藏 1 2 3 4 5 6 7 8 9 .textone { overflow: hidden; text-overflow: ellipsis

3.3K2 0

HTML溢出文字用省略号代替！

一、问题说明文字太多，溢出部分用省略号表示。...trimRight basedOn='letters' /> --- 三、参考文档溢出文字用省略号代替！

1.7K2 0

css 控制文字超出部分显示省略号

该文章转自：http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度...但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。...适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。注：将height设置为line-height的整数倍，防止超出的文字露出。...给p::after添加渐变背景可避免文字只显示一半。

1.8K2 0

Python pandas模块输出每行中间省略号问题

关于Python数据分析中pandas模块在输出的时候，每行的中间会有省略号出现，和行与行中间的省略号....问题，其他的站点（百度）中的大部分都是瞎写，根本就是复制黏贴以前的版本，你要想知道其他问题答案就得去读官方文档吧...这里看到每一行中间都会出现一个“...”省略号，这是因为模块对于每一行的显示限制，以内存最小形式来显示，所以会以省略号代替其中间的内容。...如果数据行很多的话，对于pandas模块是自动默认只显示100行数据，如果超100行，例如120行，则中间的20行会被“ ... ”替代！...先处理pandas 读取数据后在行中间省略部分的处理： 1 df = pd.read_csv('C:\\Users\\Administrator\\Desktop\\aaa.csv',encoding=...如果是行与行之间的省略，则只需要添加： pd.set_option('display.max_rows', None) 同样是以最大行数来显示数据。

951 0

【CSS】html文本溢出文字显示省略号

单行文本*/ div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; /*强制文字在一行文本框内...*/ white-space: nowrap; /*溢出部分文字隐藏*/ overflow: hidden; /*溢出部分省略号处理*/ text-overflow: ellipsis

11.8K3 0

文字超出三行省略…显示全文「建议收藏」

1、在开发过程中，我们经常会用到这种超出三行显示…的要求，使用css属性是可以的，但是需要考虑兼容性问题实现单行文本的溢出显示省略号，我们应该都知道用text-overflow:ellipsis属性，...，只是视觉上有…，实现超出三行显示全文，分为两步：（1）、是否满足三行（2）、是否出现了省略号… 或者说是否超过了三行那麽对应的解决方案：（1）行数我们可以通过使用 line-height...scrollHeight，与我们需要的高度进行比较即可； setCheckAll('.p_14', 3, '查看全文', 'text_blue'); /*设置必须有line-height 超过多少行显示文字查看全文...*/ function setCheckAll(select, num, text, name) { //num 代表行数 text为添加显示的文字， var height = $(select...菜菜叨逼叨在本次需求中，也算是一个小学习吧，本来是想通过判断文字的字数来控制“查看全文”的展示与否，这种方法实现太过复杂，需要考虑不同屏幕的尺寸，文字中的特殊字符，包括可能存在的；跟产品的谈判又失败了

2.6K6 0

CSS 设置栏目文字不换行，超出部分显示省略号

文字换行情况有些时候，在显示文字内容的地方并不像换行，而是想将溢出的部分省略号显示。 ?...设置文件不行号，超出范围显示省略号的样式强制文字不换行 white-space: nowrap; ?...设置文字超出为省略号显示 text-overflow: ellipsis; 但是单纯设置这个text-overflow: ellipsis;是无法显示省略号的。...border:1px solid #000; } p{ overflow: hidden; /* 强制文字不换行...*/ white-space: nowrap; /* 超出部分显示省略号 */ text-overflow: ellipsis

3.4K2 0

CSS 中多行文字溢出后显示省略号

* 主要代码 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /* 几行后显示省略号

1.1K1 0

使用代码实现文字在超出内容时显示省略号

一行超出显示省略 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; <div class="box-42b6...hidden; white-space: nowrap; text-overflow: ellipsis; } ::: 两行（多行）超出显示省略号...webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ::: JS...判断是否显示了省略号有时候我们需要知道是否已经溢出，显示了省略号，可以用到clientHeight和scrollHeight的知识： let cHeight = noWrapDiv.clientHeight...; let sHeight = noWrapDiv.scrollHeight; if (sHeight > cHeight) { console.log("已经溢出显示省略号"); } else

1.4K1 0

js实现文字竖向滚动

/js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...白衣扶2112弦领取247.11元现金 js

23.4K1 0

JS文字转语音TTS

网页智力游戏埋了发音彩蛋，分享下发音代码 http://linwancen.gitee.io/vantgames 百度不支持日文片假名，要是有支持日文片假名的免费引擎欢迎推荐 src/util/speak.js

10.1K1 0

文本溢出，HTML页面如何让多出的文字显示省略号

在html页面中经常会遇到文本显示框太小，无法显示出全部文字，但如果直接切掉又会很难看，这里教大家使用text-overflow: ellipsis的属性解决文本溢出问题。

2.5K5 0

Node JS 中间件如何工作？

另外，中间件可以终止 HTTP 请求，也可以用 next 将其传递给另一个中间件函数。中间件的这种“链”使你可以对代码进行划分并创建可重用的中间件。...创建一个新项目并 npm 初始化它… npm init npm install express --save Create server.js and paste the following code...假设你在 web 网络服务器上正在使用 Node.js 和 Express 运行Web应用程序。在此应用中，你需要登录的某些页面。...第三方级别的中间件在某些情况下，我们将向后端添加一些额外的功能。先安装 Node.js 模块获取所需的功能，然后在应用级别或路由器级别将其加载到你的应用中。...原文：https://www.thirdrocktechkno.com/blog/how-Node-JS-middleware-works/

3.2K3 0

js 状态栏逐字显示文字

效果图： image.png image.png image.png image.png image.png image.png ima...

7.5K4 0

指定节点滚动到屏幕中间的js

父节点的class是slimScrollDiv 子节点的class是fa-warning 执行这个js document.getElementsByClassName("slimScrollDiv"

3.4K1 0

Node.js LLM中间件【IntelliNode】

----原文链接：IntelliNode - Node.js AI - BimAnt

6701 0

echarts饼图中间文字，固定，改成自己想要的值

（仅供自己参考）中间是可以放两行文字的，一行是自己计算的比例，还可以放一个如：（这里就不多描述了上面的文字是在titletop中设置的可以看看echarts API的配置项）设置主标题副标题

4.6K2 0

巧用js替换某些不能替换的文字

在运行某些程序时，作者为了保护版权，将版权文字进行了特殊处理，使得我们无法进行修改。...这种情况下就要用到js进行替换这时可以想方设法在网页中加入以下这段js window.onload

14.9K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭