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

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

news 2026/5/19 8:56:56

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

Vivado时序约束实战：用Set_Case_Analysis给FPGA设计‘瘦身’，提升分析效率

Vivado时序约束实战&#xff1a;用Set_Case_Analysis给FPGA设计‘瘦身’&#xff0c;提升分析效率 当你在Vivado中面对一个包含数百个时钟域的中大型FPGA设计时&#xff0c;是否曾被长达数小时的时序分析运行时间和内存爆满的警告折磨得焦头烂额&#xff1f;我曾接手过一个图像…...

编程新知 2026/5/19 8:26:54

Windows驱动存储管理终极指南：DriverStore Explorer高效清理系统驱动垃圾

Windows驱动存储管理终极指南&#xff1a;DriverStore Explorer高效清理系统驱动垃圾 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer Windows驱动存储管理是系统管理员和高级用户面临的…...

编程新知 2026/5/19 8:24:53

从L0到L3的完整路径，Token降61%的底层逻辑，TencentDB Agent Memory实战：分层记忆架构详解

TencentDB Agent Memory实战&#xff1a;分层记忆架构详解 副标题: 从L0到L3的完整路径&#xff0c;Token降61%的底层逻辑痛点&#xff1a;为什么你的AI总是"记不住"&#xff1f; 你有没有遇到过这样的情况&#xff1a; AI能记住前几轮对话&#xff0c;但聊久了就&qu…...

编程新知 2026/5/19 8:18:49

Keil MDK中HEX文件未生成的8.3路径问题解析

1. 问题现象与背景解析 在嵌入式开发领域&#xff0c;Keil MDK&#xff08;Microcontroller Development Kit&#xff09;是广泛使用的集成开发环境&#xff0c;尤其针对C166系列微控制器。最近遇到一个典型问题&#xff1a;开发者在Vision1环境中配置了L166链接器和OH166 HEX转…...

编程新知 2026/5/19 8:14:18

ContextMenuManager：5分钟掌握Windows右键菜单管理的终极免费方案

ContextMenuManager&#xff1a;5分钟掌握Windows右键菜单管理的终极免费方案 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否厌倦了每次右键点击文件时&a…...

编程新知 2026/5/19 8:10:15

第1章：AI Agent认知与全景图

本章你将收获：AI Agent的核心概念与演变历程；主流框架（LangChain、AutoGPT、CrewAI）的深度对比与选型指南；5个真实Agent应用案例的拆解；一套评估项目是否需要引入Agent的决策方法论；以及可运行的Agent代码示例（含免费API）。 📌 本章导读 2024年以来，“AI Agent”成…...

编程新知 2026/5/19 7:55:10

手把手教你用TMS320F2803x DSP实现PMBus通信（附代码下载与避坑指南）

TMS320F2803x DSP实战&#xff1a;PMBus通信从零搭建到波形调试全攻略 1. 工程搭建与开发环境配置 在开始PMBus通信开发前&#xff0c;需要准备完整的软硬件环境。以下是基于TI C2000系列DSP的典型配置流程&#xff1a; 硬件准备清单&#xff1a; TMS320F2803x开发板&#xff0…...

编程新知 2026/5/19 7:37:36

机器人碰撞检测2：FCL库进阶实战与性能优化

1. 从基础到进阶&#xff1a;FCL库在机器人运动规划中的角色 第一次接触FCL库时&#xff0c;你可能已经体验过它强大的基础碰撞检测功能。但当机器人需要在一个充满动态障碍物的工厂环境中自主导航&#xff0c;或者机械臂要在密集货架上精准抓取物品时&#xff0c;简单的两两碰…...

编程新知 2026/5/19 5:40:43

告别虚拟机卡顿：在VMware 17上为RHEL 9.2分配CPU和内存的黄金法则

告别虚拟机卡顿&#xff1a;在VMware 17上为RHEL 9.2分配CPU和内存的黄金法则 当你在VMware Workstation 17上运行RHEL 9.2时&#xff0c;是否经常遇到编译速度慢、桌面响应延迟甚至整个系统卡死的情况&#xff1f;这很可能是因为你没有根据宿主机的实际硬件情况科学分配虚拟资…...

编程新知 2026/5/19 5:10:55

【免费下载】 华为光猫超级用户名密码获取工具

华为光猫超级用户名密码获取工具 【下载地址】华为光猫超级用户名密码获取工具 华为光猫超级用户名密码获取工具是一款专为华为光猫设计的辅助工具&#xff0c;主要用于获取光猫的VLAN ID。该工具通过将一系列命令编写成批处理文件&#xff0c;实现自动化执行&#xff0c;无需用…...

编程新知 2026/5/19 5:04:51