web蓝桥杯真题--12、由文本溢出引发的“不友好体验”

背景介绍

通常情况下，为保证布局的稳定性，以及遵循在有限的空间展示更多内容的原则，页面的某块区域不会随内容的增多而无限增高或增宽，一般会有一个约束。

例如：整体元素过多可以使用滚动条；文字内容过多可以使用文本溢出处理。

这些情况在实际开发中经常遇到。例如电商平台的商品列表中对商品的描述通常是简短的介绍，详细的介绍需要点击进去才能看到。

如下图所示：

图片描述

如果不进行限制，那就会变成这样：

图片描述

这么一看对用户而言，是不是体验很不好，商品的简介把价格都遮挡住了。因此，解决这样的问题成为日常开发中不可或缺的需求。

本节挑战中，就有类似的场景：页面中某块区域的文本内容过多，导致占用了其他内容的空间。效果如下图所示：

图片描述

上图文本中一共占用了 11 行文本。实际需求中，我们只希望显示 2 行即可，剩余的内容用省略号（...）替代。

通常，处理这类问题的方式有以下几种：

  1. 使用 JS 处理，先将字符串按照一定长度进行切割，去掉超出部分的内容，然后在末尾拼接省略号。
  2. 使用 CSS3 处理，利用相关的 Webkit 属性，结合 overflow 属性通过样式实现。

本节挑战，你需要开动脑筋，解决这一文本溢出的问题。

准备步骤

开始答题前，你需要确保基础代码已下载。如果没有成功下载，请点击并打开右侧环境窗口，然后在终端中键入以下命令，下载页面的基础代码：

wget https://labfile.oss.aliyuncs.com/courses/9203/03.zip && unzip 03.zip && rm 03.zip

具体操作参考下图：

图片描述

测试效果

可通过如下步骤测试效果：

  1. 右键 03/index.html，选择 Open with Live Server。
  2. 点击右侧的 Web 服务。

具体操作参考下图：

图片描述

上述操作会在浏览器中打开新的标签页，如下图所示，请点击 03 文件夹：

图片描述

之后，你将看到如下效果：

图片描述

请通过下述挑战要求，修改 03/index.html 文件，解决文本溢出的问题，最终达到如下效果：

图片描述

挑战需求

请打开 03/index.html 文件，该文件中有一段代码需要你补充，用以处理文本超出溢出的情况。

图片描述

  1. 本节挑战需使用 CSS3 的处理方式解决该问题，其他方式无效。
  2. 要求溢出 2 行时进行处理。
  3. 切勿改动源代码中已写好的部分。

要求规定

  1. 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  2. 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
  3. 不要篡改已提供的基础项目中的 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 lang="en"><head><meta charset="UTF-8"><title>由文本溢出引发的“不友好体验”</title><link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/03style.css">
</head><body><div class="container"><ul><li class="more2_item more2_item_good hover-on"><span class="more2_item_gdot"></span><a class="more2_lk"href="" target="_blank"><div class="more2_img"><img src="https://labfile.oss.aliyuncs.com/courses/9203/04_02.jpg"class="lazyimg_img" alt=""></div><div class="more2_info"><p class="more2_info_name"><i class="more2_info_self">新课</i>随着前端的发展，UI 框架经历了刀耕火种的时代，层出不穷的 UI 框架让前端再次大放异彩。ElementUI作为前端发展史上最为经典的组件库之一，学习并了解它是如何构建的，以及它的源码是如何搭建出 UI 组件的，都将为我们今后的发展与应用提供可借鉴之处！</p><div class="more2_info_price more2_info_price_plus more2_info_price_newcomer"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">72.<spanclass="more2_info_price_txt-decimal">00</span></span></div></div></div></a></li></ul></div><script>// 请在下方补充代码，使得文本溢出 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/637183.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

供应链安全项目in-toto开源框架详解

供应链安全项目in-toto开源框架详解

引言&#xff1a;in-toto 是一个开源框架&#xff0c;能够以密码学的方式验证构件生产路径上的每个组件和步骤。它可与主流的构建工具、部署工具进行集成。in-toto已经被CNCF技术监督委员会 (Technical Oversight Committee&#xff0c;TOC)接纳为CNCF孵化项目。 1. 背景 由于…
阅读更多...
【富文本编辑器实战】03 Vuex 的配置编写

【富文本编辑器实战】03 Vuex 的配置编写

Vuex 的配置编写 目录 Vuex 的配置编写Vuex 是什么&#xff1f;什么是“状态管理模式”&#xff1f;什么情况下我应该使用 Vuex&#xff1f;安装 Vuex开始使用 VuexAction 文件Mutations-types 文件Mutation 文件Index Vuex 是什么&#xff1f; 这里我们来看看官方网站是如何介…
阅读更多...
《游戏-02_2D-开发》

《游戏-02_2D-开发》

基于《游戏-01_2D-开发》&#xff0c; 继续制作游戏&#xff1a; 首先给人物添加一个2D重力效果 在编辑的项目设置中&#xff0c; 可以看出unity默认给的2D重力数值是-9.81&#xff0c;模拟现实社会中的重力效果 下方可以设置帧率 而Gravity Scale代表 这个数值会 * 重力 还…
阅读更多...
// doesn‘t exist

// doesn‘t exist

- // doesnt exist 13.3 赋给派生类引用,将发生什么情况呢?派生类引用能够为基对象调用派生类方法,这样做将出现问题。例 如,将RatedPlayer :: Rating()方法用于TableTennisPlayer对象是没有意义的,因为TableTennisPlayer对象没 有rating成员。 如果基类引用和指针可以指向…
阅读更多...
webpack 中的loader 和plugin的区别

webpack 中的loader 和plugin的区别

Loader: 作用&#xff1a; Loader 用于在模块加载时对文件进行转换。它是一个转换器&#xff0c;将文件从一种形式转换为另一种形式&#xff0c;例如&#xff0c;将 ES6 语法的 JavaScript 文件转换为能够在浏览器中运行的普通 JavaScript。使用场景&#xff1a; Loader通常被配…
阅读更多...
Addressables(2) ResourceLocation和AssetReference

Addressables(2) ResourceLocation和AssetReference

IResourceLocation var op Addressables.LoadResourceLocationsAsync(key); var result op.WaitForCompletion(); 把加载的Key塞进去&#xff0c;不难看出&#xff0c;IResourceLocation可以用来获得资源的详细信息 很适合用于更新分析&#xff0c;或者一些检查工具 AssetR…
阅读更多...
Eureka使用详解

Eureka使用详解

介绍主要特点主要功能与常用服务注册中心的比较Eureka与Zookeeper的区别和联系Eureka与Nacos的区别与联系Eureka与Consul的区别与联系 安装部署Eureka与CAP理论Eureka实现实时上下线Eureka常用注解Eureka架构模式 介绍 Eureka是一个基于REST的服务&#xff0c;主要用于AWS云中…
阅读更多...
logstack 日志技术栈-05-windows10 安装 Elasticsearch elasticsearch-8.11.1 实战笔记

logstack 日志技术栈-05-windows10 安装 Elasticsearch elasticsearch-8.11.1 实战笔记

安装 Elasticsearch elasticsearch-8.11.1 下载 访问 Elasticsearch 下载页面 解压下载的压缩文件到你选择的目录。 运行 进入 Elasticsearch 目录&#xff0c;运行 bin/elasticsearch.bat 启动 Elasticsearch。 验证 elaasticsearch的默认访问路径是localhost:9200&…
阅读更多...
HTTP 认证方式

HTTP 认证方式

目录 1.HTTP认证方式2.Python中 HTTP 认证方式的使用 本文主要介绍HTTP 认证方式有哪些及在Python中的基本使用方式。 1.HTTP认证方式 HTTP认证方式主要有以下几种&#xff1a; 基本认证&#xff08;Basic Authentication&#xff09;&#xff1a;客户端将用户名和密码进行B…
阅读更多...
一文读懂「RAG，Retrieval-Augmented Generation」检索增强生成

一文读懂「RAG，Retrieval-Augmented Generation」检索增强生成

Retrieval-Augmented Generation&#xff08;RAG&#xff09;作为机器学习和自然语言处理领域的一大创新&#xff0c;不仅代表了技术的进步&#xff0c;更在实际应用中展示了其惊人的潜力。 RAG结合了检索&#xff08;Retrieval&#xff09;和生成&#xff08;Generation&#…
阅读更多...
Flutter 页面嵌入 Android原生 View

Flutter 页面嵌入 Android原生 View

前言 文章主要讲解Flutter页面如何使用Android原生View&#xff0c;但用到了Flutter 和 Android原生 相互通信知识&#xff0c;建议先看完这篇讲解通信的文章 Flutter 与 Android原生 相互通信&#xff1a;BasicMessageChannel、MethodChannel、EventChannel-CSDN博客 数据观…
阅读更多...
pdf拆分成各个小pdf的方法

pdf拆分成各个小pdf的方法

背景：由于某些缘故，一个大的pdf需要拆分成页数少的pdf，或者pdf需要去掉指定页，那么就有必要对pdf进行重新编辑，这里需要用到一个库，直接进行操作即可。 当使用Python时，可以使用PyMuPDF库来拆分PDF文件。以下是一个示例代码， import fitz # PyMuPDF def split_pdf(i…
阅读更多...
禅道的安装及使用流程

禅道的安装及使用流程

目录 一.安装 1.下载禅道安装包​http://www.zentao.net/ 2.选择禅道开源版 3.选择需要下载的安装包&#xff08;注意&#xff1a;下载的安装包必须放在根目录&#xff0c;不能移动&#xff09; 4.将下载的安装包双击进行解压&#xff1b;解压后的文件为d:\xampp&#xff1b…
阅读更多...
sfml使用opengl着色器实现2d水面波浪

sfml使用opengl着色器实现2d水面波浪

SFML中使用GLSL着色器来绘制水波。 效果 代码 #include <SFML/Graphics.hpp> #include <iostream>int main() {const int WIDTH = 800;
阅读更多...
（南京观海微电子）——TCON介绍

（南京观海微电子）——TCON介绍

TCON板详细介绍 TCON又称&#xff1a;逻辑板&#xff0c;控制板&#xff0c;在液晶电视里的作用和CRT中的视放板相当&#xff0c;但有本质的区别&#xff0c;逻辑板不是一个纯粹的信号放大器&#xff0c;它输入是LVDS格式信号&#xff0c;而不是RGB。逻辑板的作用是把数字板送来…
阅读更多...
python进程间通信——命名管道（Named Pipe、FIFO）

python进程间通信——命名管道（Named Pipe、FIFO）

文章目录 Python中的命名管道&#xff1a;深入理解进程间通信1. 命名管道简介2. 创建和删除命名管道3. 写入命名管道4. 读取命名管道5. 示例&#xff1a;进程间通信write_to_pipe.pyread_from_pipe.py测试运行 6. 注意事项和限制命名管道的半双工机制命名管道读写任意一方未打开…
阅读更多...
记录一次QT乱码问题

记录一次QT乱码问题

问题描述 在敲陆文周的书《QT5开发及实例》的示例代码时&#xff0c;出现乱码&#xff0c;如下图所示 具体代码如下 Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->treeWidget->clear();int groupSize 2;int ite…
阅读更多...
Pyro —— Velocity Voxel Scale

Pyro —— Velocity Voxel Scale

Velocity Voxel Scale是H19.5引入的新参数&#xff0c;该参数可单独定义volume和速度体素&#xff1b;根据参数设置&#xff0c;可观察到模拟时间的显著变化&#xff1b; Velocity Voxel Scale对DOP和SOP均可用&#xff1b;对DOP设置&#xff0c;该参数在Smoke Object&#xf…
阅读更多...
js 小数精确计算 (mathjs / decimal.js)

js 小数精确计算 (mathjs / decimal.js)

mathjs import { all, create } from "mathjs";let mathjs create(all, {precision: 14,number: "BigNumber", });/**加法 */ export function jia(left: any, right: any) {return mathjs.floor(Number(mathjs.add(mathjs.bignumber(left), mathjs.bign…
阅读更多...
Docker（四）操作容器

Docker（四）操作容器

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 操作 Docker 容器 容器是 Docker 又一核心概念。 简单的说&#xff0c;容器是独立运行的一个或一组应用&#xff0c;以及它们的运行态环境…
阅读更多...
最新文章

Copyright @ 2022~2023