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

css换行

强制显示一行,超出...

 .box{white-space: nowrap; /* 强制显示一行 */overflow: hidden;text-overflow: ellipsis; /* 超出... */
}

自动换行 

一般默认制动换行

.box1{word-wrap:break-word; 
}

显示2行,超出...

.box2 {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

这里要注意的是 最好不要给盒子高度,如果给高度就会变成这样

去掉高度后

文本开始空两个字

.box{text-indent: 2em;
}

首字母放大

.box::first-letter {color: red;font-size: 2em;float: left;initial-letter: 2;
}

 

文字环绕图片

给图片设置浮动

img{width: 50px;height: 50px;display: block;float: left;
}

文字环绕图片右下角

<div class="boxstyle box6"><img src="./images/t1.jpg" class="img2" alt=""><div class="content"> 圈圈圆圆圈圈,天天年年天天的我,深深的看着你的眼,深情的温柔看着你的脸,不懂怎么表现温柔的我们,想爱就像风云的善变,记得那一天,抵过永远,在这一刹那冻结了时间,不懂怎么表现温柔的我们 还以为殉情只是古老的传言 离愁能有多痛 痛有多浓 当梦被埋在江南烟雨中 心碎了才懂</div>
</div>
 .box6 {overflow: hidden;
}.content {margin-top: -40px;line-height: 20px;
}.box6::before {content: "";display: block;height: 40px;
}

相关文章:

css换行

强制显示一行&#xff0c;超出... .box{white-space: nowrap; /* 强制显示一行 */overflow: hidden;text-overflow: ellipsis; /* 超出... */ } 自动换行 一般默认制动换行 .box1{word-wrap:break-word; } 显示2行&#xff0c;超出... .box2 {overflow: hidden;display: -…...

面试算法-常用数据结构

文章目录 数据结构数组链表 栈队列双端队列树 1&#xff09;算法和数据结构 2&#xff09;判断候选人的标准 算法能力能够准确辨别一个程序员的功底是否扎实 数据结构 数组 链表 优点&#xff1a; 1&#xff09;O(1)时间删除或者添加 灵活分配内存空间 缺点&#xff1a; 2&…...

【动态规划刷题 10】等差数列划分 最长湍流子数组

413. 等差数列划分 链接: 413. 等差数列划分 如果一个数列 至少有三个元素 &#xff0c;并且任意两个相邻元素之差相同&#xff0c;则称该数列为等差数列。 例如&#xff0c;[1,3,5,7,9]、[7,7,7,7] 和 [3,-1,-5,-9] 都是等差数列。 给你一个整数数组 nums &#xff0c;返回…...

redis 配置与优化

目录 一、关系数据库和非关系型数据库 二、关系型数据库和非关系型数据库区别 三、非关系型数据库产生背景 四、redis 1、概念 2、redis的优点 3、redis为什么这么快 五、redis安装与配置 一、关系数据库和非关系型数据库 关系型数据库&#xff1a;关系型数据库是一个结…...

数据结构例题代码及其讲解-递归与树

树 ​ 树的很多题目中都包含递归的思想 递归 递归包括递归边界以及递归式 即&#xff1a;往下递&#xff0c;往上归 递归写法的特点&#xff1a;写起来代码较短&#xff0c;但是时间复杂度较高 01 利用递归求解 n 的阶乘。 int Func(int n) {if (n 0) {return 1;}else …...

Jenkins | 流水线构建使用expect免密交互时卡住,直接退出

注意&#xff1a; expect 脚本必须以 interact 或 expect eof 结束。 原因&#xff1a; interact&#xff1a;使用interact会保持在终端而不会退回到原终端&#xff0c;所以就卡在这里。 expect eof&#xff1a;expect脚本默认的是等待10s,当执行完命令后&#xff0c;自动切回…...

git修改默认分支

git checkout 分支 切换到当前分支 git branch --set-upstream-toorigin/complete(远程分支名) 设置当前分支的上游分支为远程分支complete git branch --unset-upstream master 取消master上游分支的身份 现在&#xff0c;使用git commit&#xff0c;git push 命令可以直接…...

Android Studio开发入门教程:如何更改APP的图标?

更改APP的图标&#xff08;安卓系统&#xff09; 环境&#xff1a;Windows10、Android Studio版本如下图、雷电模拟器。 推荐图标库 默认APP图标 将新图标拉进src/main/res/mipmap-hdpi文件夹&#xff08;一般app的icon图标是存放在mipmap打头的文件夹下的&#xff09; 更改sr…...

MATLAB/Python的编程教程: 匹配滤波器的实现

MATLAB/Python的编程教程: 匹配滤波器的实现 注1:本文系“MATLAB/Python的编程教程”系列之一,致力于使用Python和Matlab实现特定的功能。本次要实现的功能是:匹配滤波器的实现。 匹配滤波器,这是一个在信号处理领域常见的主题,主要用于增强特定信号的检测性能,特别是在噪…...

java八股文面试[数据库]——JOIN优化

JOIN 是 MySQL 用来进行联表操作的&#xff0c;用来匹配两个表的数据&#xff0c;筛选并合并出符合我们要求的结果集。 JOIN 操作有多种方式&#xff0c;取决于最终数据的合并效果。常用连接方式的有以下几种: 什么是驱动表 ? 多表关联查询时,第一个被处理的表就是驱动表,使用…...

Java语法中一些需要注意的点(仅用于个人学习)

1.当字符串和其他类型相加时&#xff0c;基本都是字符串&#xff0c;这与运算顺序有关。 2.Java中用ctrl d 来结束循环输入。 3.nextLine() 遇到空格不会结束。 4.方法重载 4.1. 方法名必须相同 4.2. 参数列表必须不同(参数的个数不同、参数的类型不同、类型的次序必须不…...

golang 线程 定时器 --chatGPT

问&#xff1a;线程函数write(ch,timer),功能为启动一个线程&#xff0c;循环执行打印&#xff0c;打印条件为触发ch chane 或 timer定时器每隔一段时间会触发 GPT:以下是一个示例Golang代码&#xff0c;其中有一个名为 write 的线程函数&#xff0c;它会在触发ch通道或每隔一…...

java 编程 7个简单的调优技巧

你的Java性能调优有救了&#xff01;分享7个简单实用的Java性能调优技巧 一、以编程方式连接字符串 在Java中有很多不同的连接字符串的选项。比如&#xff0c;可以使用简单的或、良好的旧StringBuffer或StringBuilder。 那么&#xff0c;应该选择哪种方法&#xff1f; 答案取…...

03-Dockerfile

Dockerfile简介 Dockerfile是什么&#xff1f; Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 Dockerfile官网 https://docs.docker.com/engine/reference/builder/ Dockerfile构建三步曲 编写Dockerfile文件docke…...

【AI】机器学习——朴素贝叶斯

文章目录 2.1 贝叶斯定理2.1.1 贝叶斯公式推导条件概率变式 贝叶斯公式 2.1.2 贝叶斯定理2.1.3 贝叶斯决策基本思想 2.2 朴素贝叶斯2.2.1 朴素贝叶斯分类器思想2.2.2 条件独立性对似然概率计算的影响2.2.3 基本方法2.2.4 模型后验概率最大化损失函数期望风险最小化策略 2.2.5 朴…...

数学建模:模糊综合评价分析

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;模糊综合评价分析 文章目录 数学建模&#xff1a;模糊综合评价分析综合评价分析常用评价方法一级模糊综合评价综合代码 多级模糊综合评价总结 综合评价分析 构成综合评价类问题的五个…...

智能小车—PWM方式实现小车调速和转向

目录 1. 让小车动起来 2. 串口控制小车方向 3. 如何进行小车PWM调速 4. PWM方式实现小车转向 1. 让小车动起来 电机模块开发 L9110s概述 接通VCC&#xff0c;GND 模块电源指示灯亮&#xff0c; 以下资料来源官方&#xff0c;具体根据实际调试 IA1输入高电平&#xff0c…...

Getx其他高级API

// 给出当前页面的args。 Get.arguments//给出以前的路由名称 Get.previousRoute// 给出要访问的原始路由&#xff0c;例如&#xff0c;rawRoute.isFirst() Get.rawRoute// 允许从GetObserver访问Rounting API。 Get.routing// 检查 snackbar 是否打开 Get.isSnackbarOpen// 检…...

npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...

使用 dumi 开发 React 组件库时&#xff0c;为避免每次修改都发布到 npm&#xff0c;需要在本地的测试项目中使用 npm link 为组件库建立软连接&#xff0c;方便本地调试。 结果在本地测试项目使用 $ npm link 组件库 后&#xff0c;使用内部组件确报错&#xff1a; react.dev…...

「网页开发|前端开发|Vue」06 公共组件与嵌套路由:让每一个页面都平等地拥有导航栏

本文主要介绍在多个页面存在相同部分时&#xff0c;如何提取公共组件然后在多个页面中导入组件重复使用来减少重复代码。在这基础上介绍了通过嵌套路由的方式来避免页面较多或公共部分较多的情况下&#xff0c;避免不断手动导入公共组件的麻烦&#xff0c;并且加快页面跳转的速…...

别再只盯着数据了!用Arduino+GP2Y1014AU传感器,手把手教你做个能“看见”空气的PM2.5监测仪

用Arduino打造智能PM2.5监测仪&#xff1a;从硬件连接到可视化交互 在空气质量日益受到关注的今天&#xff0c;拥有一个实时监测PM2.5浓度的设备不仅能提升生活品质&#xff0c;还能为健康保驾护航。不同于市面上千篇一律的商用监测仪&#xff0c;自己动手打造一个兼具实用性和…...

UI设计入门指南——Figma新手必备操作全解析

1. Figma入门&#xff1a;从零到第一个设计稿 第一次打开Figma时&#xff0c;很多人会被满屏的英文界面和复杂工具栏吓到。其实我刚接触时也一样&#xff0c;但现在回头看&#xff0c;掌握基础操作只需要30分钟。Figma作为目前最流行的UI设计工具&#xff0c;最大的优势就是零门…...

m4s-converter:释放B站缓存价值的格式转换利器

m4s-converter&#xff1a;释放B站缓存价值的格式转换利器 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 价值对比&#xff1a;格式转换前后的效…...

4款GitHub热门浏览器自动化工具横向评测:哪款最适合你的开发需求?

4款GitHub热门浏览器自动化工具横向评测&#xff1a;哪款最适合你的开发需求&#xff1f; 在数字化转型浪潮中&#xff0c;浏览器自动化已成为提升开发效率的关键技术。无论是日常的数据采集、自动化测试&#xff0c;还是复杂的AI代理交互&#xff0c;选择一款合适的工具往往能…...

实战指南 — 基于TCGA数据的差异表达分析全流程与可视化呈现

1. TCGA数据获取与准备 第一次接触TCGA数据库时&#xff0c;我被它庞大的数据量震撼到了。作为癌症基因组图谱计划&#xff0c;TCGA收录了33种癌症类型、超过2万例患者的基因组数据。对于肝癌(LIHC)研究来说&#xff0c;这里简直就是一座金矿。 进入TCGA官网后&#xff0c;你会…...

用ZYNQ PS-SPI给Flash测个速:华邦W25Q80在25MHz时钟下的真实读写性能报告

ZYNQ PS-SPI Flash性能深度评测&#xff1a;华邦W25Q80在25MHz时钟下的极限挖掘 当我们需要在嵌入式系统中选择一款Flash存储器时&#xff0c;数据手册上的理论参数往往无法反映真实应用场景下的性能表现。本文将基于Xilinx ZYNQ平台的PS-SPI接口&#xff0c;对华邦W25Q80 Flas…...

存储系统的容量规划与管理:从预测到优化

存储系统的容量规划与管理&#xff1a;从预测到优化 背景 作为一个专注于存储架构的技术人&#xff0c;我深知容量规划与管理对存储系统的重要性。最近团队在管理存储系统时&#xff0c;遇到了容量不足、资源浪费等问题。为了帮助团队更好地理解和实践存储系统的容量规划与管理…...

【计算机架构】RISC-V:开源精简指令集如何重塑未来芯片设计

1. RISC-V&#xff1a;开源指令集的革命性突破 我第一次接触RISC-V是在2014年&#xff0c;当时这个开源指令集还只是学术界的一个研究项目。谁能想到短短几年后&#xff0c;它已经成为改变芯片设计行业的颠覆性力量。与ARM、x86等传统商业架构不同&#xff0c;RISC-V最吸引我的…...

韩国AI芯片企4亿融资,挑战英伟达?

3月31日消息&#xff0c;韩国AI芯片初创企业Rebellions完成4亿美元融资&#xff0c;总融资达8.5亿美元&#xff0c;估值约23.4亿美元&#xff0c;正筹备上市。还发布两款产品&#xff0c;欲挑战英伟达。巨额融资与上市筹备近日&#xff0c;Rebellions宣布完成4亿美元融资&#…...

C++的std--ranges适配器视图元素类型系统与概念约束在模板

C20引入的std::ranges库彻底改变了传统迭代器模式&#xff0c;其适配器视图与概念约束系统为模板元编程带来了革命性提升。本文将深入剖析这一机制如何通过编译期类型推导与约束检查&#xff0c;实现更安全、更高效的泛型编程范式。 视图元素类型推导机制 std::ranges视图通过…...