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

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>

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

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

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

相关文章

多路彩灯控制器LED流水灯花型verilog仿真图视频、源代码

名称&#xff1a;多路彩灯控制器LED流水灯花型verilog 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 用quartus和modelism&#xff0c;设计一个多路彩灯控制器&#xff0c;能够使花型循环变化&#xff0c;具有复位清零功能&#xff0c;并可以选择…

蓝牙技术|Matter或能改变中国智能家居市场,蓝牙技术将得到进一步应用

近年来&#xff0c;智能家居开放协议标准Matter&#xff08;目前版本 1.1&#xff09;由连接标准联盟发布&#xff0c;该联盟是一个由数百家公司组成的全球性机构&#xff0c;旨在提供与物联网 (IoT) 相关的标准。例如&#xff0c;Matter 用于允许 Amazon Alexa、Apple Home、G…

1.3.OpenCV技能树--第一单元--图像的基础操作(进阶篇)

目录 1.文章内容来源 2.图像的进阶操作 2.1.边界填充 2.2.数值计算 2.3.图像融合 2.4.图像保存 2.5.视频读取 3.课后习题代码复现 3.1.问题一图像像素颜色 3.2.问题二图片黑客帝国化 3.3.问题三梅西的足球轨迹 4.易错点总结与反思 1.文章内容来源 1.题目来源:https://edu.c…

排序算法——直接插入排序

一、介绍 插入排序就是将前两个元素排好&#xff0c;再将第三个元素通过与前边的元素比较后插入适当的位置&#xff0c;再将第四个元素插入&#xff0c;不断重复插入与前边元素比较的操作&#xff0c;直到将元素都排列好。 演示如下&#xff1a; 视频演示&#xff1a;…

GB28181学习(六)——实时视音频点播(数据传输部分)

GB28181系列文章&#xff1a; 总述&#xff1a;https://blog.csdn.net/www_dong/article/details/132515446 注册与注销&#xff1a;https://blog.csdn.net/www_dong/article/details/132654525 心跳保活&#xff1a;https://blog.csdn.net/www_dong/article/details/132796…

千兆以太网传输层 UDP 协议原理与 FPGA 实现(UDP接收)

文章目录 前言心得体会一、 UDP 协议简单回顾二、UDP接收实现三、完整代码展示四、仿真测试(1)模拟电脑数据发送,(2)测试顶层文件编写(3)仿真文件(4)仿真波形前言 在前面我们对以太网 UDP 帧格式做了讲解,UDP 帧格式包括前导码+帧界定符、以太网头部数据、IP 头部数…

断点测试怎么做,一文教你用Charles 工具做好接口测试!

在测试工作过程中&#xff0c;我们经常会在程序的某一行或者某一环节设置断点&#xff0c;在程序请求的过程中&#xff0c;修改断点处的参数、请求或者响应&#xff0c;这就是所谓的断点测试。这类断点测试主要用于接口测试。 断点测试可以通过查看接口返回数据可以方便定位是前…

大数据—数据透析表常见使用(手把手详解)

我的个人主页&#xff1a;☆光之梦☆_C语言基础语法&#xff08;超详细&#xff09;,【java入门】语法总结-CSDN博客 创作不易&#xff0c;如果能帮到你就好 注&#xff1a;你的 &#x1f44d;点赞 ⭐收藏 &#x1f4dd;评论 是对博主最大的支持与鼓励喔 目录 一、创建数据透…

Stable Diffusion云服务器部署完整版教程

Stable Diffusion云服务器部署完整版教程 2023年07月04日 22:30 3607浏览 18喜欢 22评论 <span class"bili-avatar-icon bili-avatar-right-icon "></span> </div>薯片_AI 粉丝&#xff1a; 1513 文章&#xff1a; 1 设置分组取消关注 已关注 …

Android Studio实现简易计算器(带横竖屏,深色浅色模式,更该按钮颜色,selector,style的使用)

目录 前言 运行结果&#xff1a; 运行截屏&#xff08;p50e&#xff09; apk文件 源码文件 项目结构 总览 MainActivity.java drawable 更改图标的方法&#xff1a; blackbutton.xml bluebuttons.xml greybutton.xml orangebuttons.xml whitebutton.xml layout 布…

基于AlexNet深度学习网络的智能垃圾分类系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、基于AlexNet深度学习网络的智能垃圾分类系统概述 4.2、基于AlexNet深度学习网络的智能垃圾分类系统主要原理 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab20…

Axure RP 9 for Mac(原型设计软件)中文正式版

Axure RP 9 是一款流行的原型设计和线框图软件&#xff0c;允许设计人员和开发人员为网站和移动应用程序创建交互式动态原型。它提供了一整套用于创建交互式设计的工具和功能&#xff0c;包括拖放小部件、条件逻辑、动态内容和动画。 软件下载&#xff1a;Axure RP 9 for Mac中…