当前位置： 首页 > news >正文

Bootstrap对溢出内容的两种处理:滚动条和隐藏两种方式

news 2025/9/2 0:22:22

Bootstrap中定义了以下两个类来处理内容溢出的情况：
类overflow-auto：在固定宽度和高度的元素上，如果内容溢出了元素，将生成一个垂直滚动条，通过滚动条可以查看溢出的内容。
类overflow-hidden:在固定宽度和高度的元素上，如果内容溢出了元素，溢出的部分将被隐藏。

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>处理内容溢出</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container p-3">
<h4 align="center">处理内容溢出</h4>
<div class="overflow-auto border float-left" style="width: 200px;height: 100px;">对潇潇暮雨洒江天，一番洗清秋。渐霜风凄紧，关河冷落，残照当楼。是处红衰翠减，苒苒物华休。唯有长江水，无语东流。
</div>
<div class="overflow-hidden border float-right" style="width: 200px;height: 100px;">对潇潇暮雨洒江天，一番洗清秋。渐霜风凄紧，关河冷落，残照当楼。是处红衰翠减，苒苒物华休。唯有长江水，无语东流。
</div>
</body></html>

运行效果如下图所示：
在这里插入图片描述

相关文章：

Bootstrap对溢出内容的两种处理:滚动条和隐藏两种方式

Bootstrap中定义了以下两个类来处理内容溢出的情况&#xff1a; 类overflow-auto&#xff1a;在固定宽度和高度的元素上&#xff0c;如果内容溢出了元素&#xff0c;将生成一个垂直滚动条&#xff0c;通过滚动条可以查看溢出的内容。 类overflow-hidden:在固定宽度和高度的元素…...

编程日记 2023/10/9 23:25:07

elasticsearch基本语法

这里写自定义目录标题 elasticsearch简介基本语法索引创建索引修改索引删除索引 查询简单查询精确查询条件查询范围查询&#xff1a;聚合查询&#xff1a;排序和分页&#xff1a; 参考文献&#xff1a; elasticsearch简介 Elasticsearch 是一个开源的分布式搜索和分析引擎&…...

编程日记 2023/10/9 23:23:05

Maven Spring jar包启动报错 排查

Maven Spring jar包启动报错排查 背景 maven 编译jar包&#xff0c;放在linux服务器启动不起来&#xff0c;提示&#xff1a;xxxx-0.0.1-SNAPSHOT.jar中没有主清单属性 原因 pom 配置文件&#xff0c;多了 <skip>true</skip> <build><plugins>&l…...

编程日记 2023/10/9 23:22:04

LeetCode-2485-找出中枢整数

题目描述&#xff1a; 给你一个正整数 n &#xff0c;找出满足下述条件的 中枢整数 x &#xff1a; 1 和 x 之间的所有元素之和等于 x 和 n 之间所有元素之和。 返回中枢整数 x 。如果不存在中枢整数&#xff0c;则返回 -1 。题目保证对于给定的输入&#xff0c;至多存在一个中…...

编程日记 2023/10/9 23:21:02

nano pi m1配置脚本（全志H3）

为nanopi m1写一个自动配置脚本&#xff0c;简化自己的操作 配置&#xff1a;H3芯片&#xff0c;1G内存&#xff0c;64G卡 系统&#xff1a;friendlycore focal 4.14版本 一、系统安装 烧录系统后&#xff0c;插入机器&#xff0c;但是使用df -ih发现只有900K的nodes&#xff…...

编程日记 2023/10/9 23:20:01

linux--gdb的使用

1&#xff0c;Makefile默认release版本&#xff0c;要想进入debug版本需添加-g后缀 2&#xff0c;进入调试界面&#xff1a;gdb 可执行程序 3&#xff0c;显示代码&#xff1a;l&#xff08;list&#xff09; 数字&#xff08;1/0&#xff09; 不停回车可一直显示到结束并显…...

编程日记 2023/10/9 23:19:00

JVM命令行监控工具

JVM命令行监控工具 概述 性能诊断是软件工程师在日常工作中需要经常面对和解决的问题&#xff0c;在用户体验至上的今天&#xff0c;解决好应用的性能问题能带来非常大的收益。 Java作为最流行的编程语言之一&#xff0c;其应用性能诊断一直受到业界广泛关注&#xff0c;可能…...

编程日记 2023/10/9 23:17:59

系统架构设计：4 论微服务架构及其应用

目录 一 微服务架构 1 微服务 2 微服务架构的优点 ３微服务面临的挑战...

编程日记 2023/10/9 23:16:56

【C++设计模式之建造者模式:创建型】分析及示例

简介 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它将复杂对象的构建过程与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 描述 建造者模式通过将一个复杂对象的构建过程拆分成多个简单的部分&#xff0c;并由不同…...

编程日记 2023/10/9 23:13:53

C++day03（动态内存、类中特殊成员函数）

今日任务 1> 思维导图 2> 设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 代码&#xff1a; …...

编程日记 2023/10/9 23:12:52

【Leetcode】179. 最大数

一、题目 1、题目描述 给定一组非负整数 nums，重新排列每个数的顺序（每个数不可拆分）使之组成一个最大的整数。 注意：输出结果可能非常大，所以你需要返回一个字符串而不是整数。 示例1： 输入：nums = [10,2] 输出："210"示例2： 输入：nums = [3,30,34,5…...

编程日记 2023/10/9 23:11:52

ArduPilot开源飞控之AP_Baro_MSP

ArduPilot开源飞控之AP_Baro_MSP 1. 源由2. back-end抽象类3. 方法实现3.1 AP_Baro_MSP3.2 update3.3 handle_msp3.4 MSP UART port 4. 参考资料 1. 源由 鉴于ArduPilot开源飞控之AP_Baro中涉及Sensor Driver有以下总线类型&#xff1a; I2CSerial UARTCANSITL //模拟传感器(…...

编程日记 2023/10/9 23:10:51

openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw

文章目录 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw94.1 编译mysql_fdw94.2 使用mysql_fdw94.3 常见问题94.4 注意事项 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw openGauss的fdw实现的功能是各个openGauss数据库及远程…...

编程日记 2023/10/9 23:09:49

UML图 - 类图（Class Diagram）

类图是描述系统中的类&#xff0c;以及各个类之间的关系的静态视图。能够让我们在正确编写代码以前对系统有一个全面的认识。类图是一种模型类型&#xff0c;确切的说&#xff0c;是一种静态模型类型。类图表示类、接口和它们之间的协作关系。 类图的结构 类一般由三部分组成&…...

编程日记 2023/10/9 23:08:48

sheng的学习笔记-【中文】【吴恩达课后测验】Course 2 - 改善深层神经网络 - 第二周测验

课程2_第2周_测验题 目录&#xff1a;目录 第一题 1.当输入从第8个mini-batch的第7个的例子的时候&#xff0c;你会用哪种符号表示第3层的激活&#xff1f; A. 【  】 a [ 3 ] { 8 } ( 7 ) a^{[3]\{8\}(7)} a[3]{8}(7) B. 【  】 a [ 8 ] { 7 } ( 3 ) a^{[8]\{7\}(3)} a…...

编程日记 2023/10/9 23:07:47

Nacos 监控手册

Nacos 0.8.0版本完善了监控系统&#xff0c;支持通过暴露metrics数据接入第三方监控系统监控Nacos运行状态&#xff0c;目前支持prometheus、elastic search和influxdb&#xff0c;下面结合prometheus和grafana如何监控Nacos。与elastic search和influxdb结合可自己查找相关资料…...

编程日记 2023/10/9 23:06:46

项目需求分析5大常见问题及解决方案

需求分析过程中&#xff0c;往往容易导致需求不准确和不完整&#xff0c;引起需求频繁变更&#xff0c;导致项目进度延误和成本增加&#xff1b;而需求分析的误解问题&#xff0c;导致交付产品无法满足客户期待&#xff0c;降低用户满意度和资源浪费。 那么在需求分析中&#x…...

编程日记 2023/10/9 23:03:42

C#学习系列相关之多线程（四）----async和await的用法

一、async、await用法的作用 async用法主要是用来作为修饰符将方法作为异步方法使用&#xff0c;await关键字只用作为在异步方法才能使用&#xff0c;也就是只有当方法有async修饰后&#xff0c;才能在方法中使用await&#xff0c;await后跟Task新的任务启动。&#xff08;awai…...

编程日记 2023/10/9 23:02:41

极智AI | 大模型优化之KV Cache

欢迎关注我的公众号 [极智视界]，获取我的更多经验分享 大家好，我是极智视界，本文来介绍一下 大模型优化之KV Cache。 邀您加入我的知识星球「极智视界」，星球内有超多好玩的项目实战源码下载，链接：https://t.zsxq.com/0aiNxERDq 在大模型的优化中经常会听到的一个技术叫…...

编程日记 2023/10/9 23:01:39

Android 使用 registerForActivityResult() 打开系统相册或相机获取图像

一、简介 当使用了 AndroidX 后&#xff0c;发现 startActivityForResult() 标记为过时了&#xff0c;而是推荐我们使用 registerForActivityResult() 函数。 registerForActivityResult() 函数是 Android 中用于启动 Activity 结果回调的新方式。这个函数的目的是简化在 Act…...

编程日记 2023/10/9 23:00:38

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/8/9 17:11:36

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/7/6 16:44:09

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

编程新知 2025/7/20 10:35:34

怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

编程新知 2025/8/28 4:17:05

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

编程新知 2025/8/25 20:41:55

XXE漏洞知识

目录 1.XXE简介与危害 XML概念 XML与HTML的区别 1.pom.xml 主要作用 2.web.xml 3.mybatis 2.XXE概念与危害 案例&#xff1a;文件读取&#xff08;需要Apache >5.4版本&#xff09; 案例&#xff1a;内网探测&#xff08;鸡肋&#xff09; 案例&#xff1a;执行命…...

编程新知 2025/8/31 11:53:28

【靶场】XXE-Lab xxe漏洞

前言 学习xxe漏洞，搭了个XXE-Lab的靶场 一、搭建靶场 现在需要登录，不知道用户名密码，先随便试试抓包 二、判断是否存在xxe漏洞 1.首先登录抓包 看到xml数据解析，由此判断和xxe漏洞有关，但还不确定xxe漏洞是否存在。 2.尝试xxe 漏洞 判断是否存在xxe漏洞 A.send to …...

编程新知 2025/8/26 7:05:16

Nginx 事件驱动理解

在做埋点采集服务的过程中&#xff0c;主要依靠openresty加lua脚本来实现采集。高并发还是主要依靠nginx来实现。而其核心就是事件驱动/多路io复用&#xff08;epoll机制&#xff09;&#xff0c;不同的linux服务器都有对应的实现方式。 而epoll机制就是&#xff0c;应用启动的…...

编程新知 2025/7/5 16:32:23