做室内设计通常上的网站,关键词挖掘查询工具爱站网,蝶山网站建设,广东做陶瓷的网站背景介绍
通常情况下#xff0c;为保证布局的稳定性#xff0c;以及遵循在有限的空间展示更多内容的原则#xff0c;页面的某块区域不会随内容的增多而无限增高或增宽#xff0c;一般会有一个约束。
例如#xff1a;整体元素过多可以使用滚动条#xff1b;文字内容过多…背景介绍
通常情况下为保证布局的稳定性以及遵循在有限的空间展示更多内容的原则页面的某块区域不会随内容的增多而无限增高或增宽一般会有一个约束。
例如整体元素过多可以使用滚动条文字内容过多可以使用文本溢出处理。
这些情况在实际开发中经常遇到。例如电商平台的商品列表中对商品的描述通常是简短的介绍详细的介绍需要点击进去才能看到。
如下图所示 如果不进行限制那就会变成这样 这么一看对用户而言是不是体验很不好商品的简介把价格都遮挡住了。因此解决这样的问题成为日常开发中不可或缺的需求。
本节挑战中就有类似的场景页面中某块区域的文本内容过多导致占用了其他内容的空间。效果如下图所示 上图文本中一共占用了 11 行文本。实际需求中我们只希望显示 2 行即可剩余的内容用省略号...替代。
通常处理这类问题的方式有以下几种
使用 JS 处理先将字符串按照一定长度进行切割去掉超出部分的内容然后在末尾拼接省略号。使用 CSS3 处理利用相关的 Webkit 属性结合 overflow 属性通过样式实现。
本节挑战你需要开动脑筋解决这一文本溢出的问题。
准备步骤
开始答题前你需要确保基础代码已下载。如果没有成功下载请点击并打开右侧环境窗口然后在终端中键入以下命令下载页面的基础代码
wget https://labfile.oss.aliyuncs.com/courses/9203/03.zip unzip 03.zip rm 03.zip具体操作参考下图 测试效果
可通过如下步骤测试效果
右键 03/index.html选择 Open with Live Server。点击右侧的 Web 服务。
具体操作参考下图 上述操作会在浏览器中打开新的标签页如下图所示请点击 03 文件夹 之后你将看到如下效果 请通过下述挑战要求修改 03/index.html 文件解决文本溢出的问题最终达到如下效果 挑战需求
请打开 03/index.html 文件该文件中有一段代码需要你补充用以处理文本超出溢出的情况。 本节挑战需使用 CSS3 的处理方式解决该问题其他方式无效。要求溢出 2 行时进行处理。切勿改动源代码中已写好的部分。
要求规定
请严格按照考试步骤操作切勿修改考试默认提供项目中的文件名称、文件夹路径等。满足题目需求后保持 Web 服务处于可以正常访问状态点击「提交检测」系统会自动判分。不要篡改已提供的基础项目中的 id 和 class 等属性值及 DOM 结构以免造成检测失败。 解题思路
这个知识点是我以前见过的但是我没有记住
const text document.querySelector(.more2_info_name)
text.style.setProperty(-webkit-line-clamp,2);
text.style.setProperty(overflow,hidden);
text.style.setProperty(text-overflow,ellispsis); 希望这次能记住一点
整体代码
!DOCTYPE html
html langenheadmeta charsetUTF-8title由文本溢出引发的“不友好体验”/titlelink relstylesheet hrefhttps://labfile.oss.aliyuncs.com/courses/9203/03style.css
/headbodydiv classcontainerulli classmore2_item more2_item_good hover-onspan classmore2_item_gdot/spana classmore2_lkhref target_blankdiv classmore2_imgimg srchttps://labfile.oss.aliyuncs.com/courses/9203/04_02.jpgclasslazyimg_img alt/divdiv classmore2_infop classmore2_info_namei classmore2_info_self新课/i随着前端的发展UI 框架经历了刀耕火种的时代层出不穷的 UI 框架让前端再次大放异彩。ElementUI作为前端发展史上最为经典的组件库之一学习并了解它是如何构建的以及它的源码是如何搭建出 UI 组件的都将为我们今后的发展与应用提供可借鉴之处/pdiv classmore2_info_price more2_info_price_plus more2_info_price_newcomerdiv classmod_pricei¥/ispan classmore2_info_price_txt72.spanclassmore2_info_price_txt-decimal00/span/span/div/div/div/a/li/ul/divscript// 请在下方补充代码使得文本溢出 2 行时使用省略号const text document.querySelector(.more2_info_name)text.style.setProperty(-webkit-line-clamp,2);text.style.setProperty(overflow,hidden);text.style.setProperty(text-overflow,ellispsis);/script
/body/html
