响应式布局网站实例杭州公司社保缴纳时间

响应式布局网站实例,杭州公司社保缴纳时间,网站运营职责,用liferay做的网站在前端开发中#xff0c;文本溢出时显示省略号#xff08;…#xff09;是高频需求#xff0c;本文详细讲解单行文本和多行文本省略号的通用实现方案#xff0c;包含兼容性处理和常见坑点#xff0c;适配不同业务场景。 目录 一、单行文本省略号#xff08;全浏览器兼容…在前端开发中文本溢出时显示省略号…是高频需求本文详细讲解单行文本和多行文本省略号的通用实现方案包含兼容性处理和常见坑点适配不同业务场景。目录一、单行文本省略号全浏览器兼容核心原理完整代码关键注意点二、多行文本省略号分场景适配方案 1CSS 原生方案现代浏览器核心原理完整代码适配范围注意点方案 2兼容 IE 的降级方案伪元素 定位核心原理完整代码适配范围优化技巧方案 3JS 精准截断无兼容问题优势缺点三、常见问题与解决方案四、总结一、单行文本省略号全浏览器兼容核心原理通过 3 个 CSS 属性配合强制文本单行显示、溢出隐藏、溢出部分替换为省略号。完整代码css/* 单行文本省略号 */ .single-line-ellipsis { /* 1. 强制文本单行显示 */ white-space: nowrap; /* 2. 溢出容器部分隐藏 */ overflow: hidden; /* 3. 溢出部分显示省略号 */ text-overflow: ellipsis; /* 可选设置容器宽度必须有固定/最大宽度否则不会触发溢出 */ width: 200px; /* 或 max-width: 100%;适配响应式 */ }html预览div classsingle-line-ellipsis 这是一段需要单行显示并在溢出时展示省略号的测试文本用于演示单行省略号效果 /div关键注意点必须设置容器宽度width/max-width/flex-basis等否则文本会自动换行无法触发溢出仅对单行生效white-space: nowrap是核心移除后会失效兼容所有浏览器IE6、Chrome、Firefox、Safari 均支持无兼容性问题行内元素需转块级若应用在span/a等行内元素需添加display: inline-block;或display: block;。二、多行文本省略号分场景适配多行省略号无统一的 “全兼容” 方案需根据浏览器兼容性要求选择实现方式。方案 1CSS 原生方案现代浏览器核心原理使用-webkit-line-clampWebKit 内核私有属性限制显示行数配合弹性盒模型实现省略。完整代码css/* 多行文本省略号Chrome/Safari/Edge/Firefox 68 */ .multi-line-ellipsis { /* 1. 限制显示行数 */ -webkit-line-clamp: 3; /* 关键显示3行可自定义 */ /* 2. 配合弹性盒和换行规则 */ display: -webkit-box; -webkit-box-orient: vertical; /* 3. 溢出隐藏 省略号兜底 */ overflow: hidden; text-overflow: ellipsis; /* 必须设置容器宽度 */ width: 200px; /* 可选行高优化可读性 */ line-height: 1.5; }html预览div classmulti-line-ellipsis 这是一段需要多行显示并在溢出时展示省略号的测试文本用于演示多行省略号效果文本内容足够长才能触发省略号。 /div适配范围✅ 支持Chrome、Safari、EdgeChromium 内核、Firefox 68、移动端所有浏览器❌ 不支持IE 全版本、极老版 Firefox68。注意点-webkit-line-clamp是私有属性但现代浏览器已广泛支持日常开发优先使用必须配合display: -webkit-box和-webkit-box-orient: vertical缺一不可容器需设置宽度否则无法触发溢出。方案 2兼容 IE 的降级方案伪元素 定位核心原理通过heightline-height固定行数高度伪元素::after定位省略号覆盖在文本末尾。完整代码css/* 多行文本省略号兼容 IE8 */ .multi-line-ellipsis-ie { position: relative; /* 核心行数 × 行高 容器高度示例3行行高1.5 */ height: 4.5em; /* 1.5 × 3 4.5 */ line-height: 1.5; overflow: hidden; width: 200px; /* 可选文本缩进不影响核心逻辑 */ text-indent: 0; } /* 伪元素添加省略号 */ .multi-line-ellipsis-ie::after { content: ...; position: absolute; right: 0; bottom: 0; /* 背景色覆盖末尾文本需与容器背景一致 */ background-color: #fff; /* 省略号区域宽度可调整 */ padding-left: 10px; }html预览div classmulti-line-ellipsis-ie 这是一段需要兼容IE的多行省略号测试文本通过固定高度和伪元素实现省略效果适配低版本浏览器。 /div适配范围✅ 支持IE8、所有现代浏览器❌ 缺点省略号可能会覆盖部分文本无法精准截断背景色需与容器一致否则会露底。优化技巧伪元素padding-left可根据字体大小调整避免省略号覆盖过多文本若文本未溢出需通过 JS 控制伪元素显示 / 隐藏纯 CSS 无法判断是否溢出。方案 3JS 精准截断无兼容问题若需极致兼容且避免 CSS 方案的缺陷可通过 JavaScript 计算文本宽度精准截断并添加省略号js/** * 多行文本截断函数 * param {HTMLElement} el - 文本容器元素 * param {number} lineNum - 显示行数 * param {string} ellipsis - 省略号字符 */ function truncateMultiLineText(el, lineNum 3, ellipsis ...) { if (!el) return; const originText el.textContent.trim(); const lineHeight parseFloat(getComputedStyle(el).lineHeight); const containerWidth parseFloat(getComputedStyle(el).width); // 估算每行可显示的字符数粗略值可根据字体调整 const charPerLine Math.floor(containerWidth / (lineHeight / 2)); const maxCharNum charPerLine * lineNum - ellipsis.length; if (originText.length maxCharNum) { el.textContent originText.slice(0, maxCharNum) ellipsis; } } // 调用示例 const textEl document.querySelector(.js-multi-ellipsis); truncateMultiLineText(textEl, 3);css/* 配合JS的基础样式 */ .js-multi-ellipsis { width: 200px; line-height: 1.5; }html预览div classjs-multi-ellipsis 这是通过JS精准截断的多行文本无浏览器兼容问题可精准控制显示行数和省略号。 /div优势全浏览器兼容省略号位置精准可动态适配容器宽度变化结合resize事件。缺点依赖 JS首次渲染可能有闪烁字符数估算存在误差不同字体 / 字符宽度不同可结合Canvas计算精准宽度。三、常见问题与解决方案问题现象原因解决方法单行省略号不生效容器无宽度 / 元素是行内元素 / 未设置white-space: nowrap1. 添加width/max-width2. 设display: inline-block/block3. 确认white-space: nowrap多行原生方案失效缺少-webkit-box-orient: vertical/ 容器未设高度1. 补充-webkit-box-orient: vertical2. 无需手动设高度由-webkit-line-clamp控制省略号覆盖文本IE 方案伪元素背景色与容器不一致 /padding-left 过小1. 伪元素背景色与容器统一2. 增大padding-left如 10px → 15px移动端多行省略号错位容器宽度自适应导致计算错误1. 使用max-width: 100%替代固定宽度2. 移动端优先用原生-webkit-line-clamp方案四、总结实现方式兼容性优点缺点适用场景单行 CSS全兼容简单、无坑仅单行按钮、导航栏、短文本多行原生 CSS现代浏览器简洁、精准不兼容 IE移动端、现代浏览器项目多行 IE 兼容 CSSIE8纯 CSS、无需 JS省略号可能覆盖文本需兼容低版本 IE 的 PC 端JS 截断全兼容精准、灵活依赖 JS、首次渲染闪烁极致兼容需求、动态文本场景日常开发中移动端优先使用「多行原生 CSS 方案」PC 端若无需兼容 IE 也推荐该方案仅需兼容 IE 时再选择「伪元素降级方案」或「JS 截断方案」。