程序员经验分享-hwhale

css如何换行

2023-05-16

在css中通过word-break与white-space这两个属性来设置自动换行，其中word-wrap属性允许长单词或URL地址换行到下一行；而white-space属性可以设置文本换行方式。

本文操作环境：windows7系统、css3版、Dell G3电脑。

css如何换行？

css使容器放不下自动换行

css可以通过word-break与white-space这两个属性来设置自动换行。word-wrap属性允许长单词或URL地址换行到下一行。white-space属性可以设置文本换行方式。

css使容器放不下自动换行：

css代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<style type="text/css">

.linebr {

clear: both; /* 清除左右浮动 */

width: 100px; /* 必须定义宽度 */

border:1px solid ;/*定义容器外边框*/

word-break: break-word; /* 文本行的任意字内断开，就算是一个单词也会分开 */

word-wrap: break-word; /* IE */

white-space: -moz-pre-wrap; /* Mozilla */

white-space: -hp-pre-wrap; /* HP printers */

white-space: -o-pre-wrap; /* Opera 7 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: pre; /* CSS2 */

white-space: pre-wrap; /* CSS 2.1 */

white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */

}

</style>

HTML代码：

<div class="linebr">CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行</div>

效果图：

word-break属性：

word-wrap 属性允许长单词或 URL 地址换行到下一行。

语法：

1

word-wrap: normal|break-word;

属性值：

normal 只在允许的断字点换行（浏览器保持默认处理）。

break-word 在长单词或 URL 地址内部进行换行。

white-space属性

white-space 属性设置如何处理元素内的空白。

属性值：

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

推荐学习：《css视频教程》

以上就是css如何换行的详细内容，更多请关注php中文网其它相关文章！

css如何换行-css教程-PHP中文网在css中通过word-break与white-space这两个属性来设置自动换行，其中word-wrap属性允许长单词或URL地址换行到下一行；而white-space属性可以设置文本换行方式。icon-default.png?t=M276https://m.php.cn/article/478300.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css如何换行 的相关文章

  • OFD版式文件的优势

    OFD版式文件的优势 OFD格式是我国自主可控的电子文件版式文档格式 在OFD格式产生之前 xff0c 电子文件存档格式并没有统一的国家或行业标准 xff0c 档案工作中普遍采用DOC WPS PPTX等流式文件格式 内容易更改 转移过程存

  • OFD是什么？

    OFD是什么 xff1f OFD格式文件介绍 OFD xff08 Open Fixed layout Document的简称 xff0c 意为开放版式文档 xff09 xff0c 是按照我国自主研发制定的版式文档格式标准 GB T 3319

  • ofd格式文件转换成pdf格式的方法

    ofd格式文件很多人还比较陌生 xff0c 很多人接收到文件都不知如何打开阅读 xff0c 把文件发给对方 xff0c 还需要对方安装个专门的阅读软件 xff0c 我们还有另一个办法 xff0c 就是将OFD文件转换为PDF格式文件 xff

  • 比较出名的导航类网站

    网址导航是把很多网站集合起来 xff0c 按照一定的条件进行分类的网站 网址导航方便网民快速找到自己需要的网站 xff0c 可以直接到需要的网站 xff0c 而不必记住各个网站的网址 现在的网址导航一般都提供自己常用的查询工具 xff0c

  • 使用NGINX作为HTTPS正向代理服务器

    简介 xff1a NGINX主要设计作为反向代理服务器 xff0c 但随着NGINX的发展 xff0c 它同样能作为正向代理的选项之一 正向代理本身并不复杂 xff0c 而如何代理加密的HTTPS流量是正向代理需要解决的主要问题 本文将介绍

  • 超级小的docker镜像

    超级小的docker镜像 xff0c 通过可用来做基础镜像或者测试使用 拉镜像尽量选择带有apline或slim标签的 xff0c 体积很小 alpine镜像官方地址 xff1a https hub docker com alpine 拉取

  • 16进制转Base64的实现原理及代码

    随着计算机技术的发展 xff0c 数据的存储和传输方式也在不断更新 xff0c 其中十六进制字符串和Base64编码是两种常见的数据表示方式 本文将介绍16进制字符串和Base64编码的原理 xff0c 并提供Java代码实现16进制字符串

  • MySQL错误-this is incompatible with sql_mode=only_full_group_by解决办法

    原因分析 xff1a 一 原理层面 这个错误发生在mysql 5 7 5 版本及以上版本会出现的问题 xff1a mysql 5 7 5版本以上默认的sql配置是 sql mode 61 ONLY FULL GROUP BY xff0c 这

  • pulsar-admin接入项目

    练手项目 第一步 xff1a 添加依赖 lt dependency gt lt groupId gt org apache pulsar lt groupId gt lt artifactId gt pulsar client admin

  • C/C++语言——函数返回临时变量、对象

    函数内部栈上创建的临时变量 临时对象 xff0c 生命周期只在函数运行期间 xff0c 函数运行结束后 xff0c 就会释放对应内存空间 错误的函数写法 int amp test1 int x 61 1 return x 错误的函数写法 i

  • VS2008——调试方法大全

    一 断点调试 总结以下VS2008的调试方法 xff0c 首先最常用的就是使用断点了 xff0c 断点分为两种 xff1a 普通断点 跟踪点 普通断点就是红色圆点 xff0c 跟踪点是红色菱形 可以通过右键设置断点相关内容 xff0c 让断

  • Effective C++——22.将成员变量声明为private

    1 一致性 xff1a 如果public中的每样东西都是函数 xff0c 就不需要思考使用的时候要不要带小括号 2 使用函数可以让成员变量的处理有更精确的控制 3 封装性 xff1a 有时候要根据不同情况修改set和get的实现方式 xff

  • Effective C++——4.确定对象被使用前已经初始化

    1 为防止有的情况下对象未初始化导致的混乱 xff0c 最佳的处理办法就是 xff1a 永远在使用对象之前先将它初始化 对于无任何成员的内置类型 xff0c 必须手工完成 2 内置类型以外的任何其他东西 xff0c 初始化责任在构造函数中

  • Effective C++——32.确定public继承是“is-a”关系

    1 is a关系的概念 xff0c 就是基类可以实现的事情 xff0c 子类就一定要能实现 如果不能实现 xff0c 可以修改设计 xff0c 比如将基类能实现 xff0c 子类却不能实现的事情派生出一个中间基类 记住一点 xff1a 1

  • Java中repaint方法清除原来图像问题

    虽然Java界面编程作用不大 xff0c 但在兴趣的驱使下还是了解了一下 xff0c 在写小程序的时候发现了repaint方法有时候会清理原来的图像 xff0c 有时候又不清理 下面贴出我通过API文档得出的结论 xff0c 以下例子窗口为

  • 怎样找回自己CSDN丢失博客？

    写博客是件很欢快的事情 xff0c 但没多久就发现自己刚写的博客丢失 xff0c 这是一件更加 欢快 的事情 百度了一下关于CSDN博客丢失的现象 xff0c 虽然不算很多 xff0c 但还是有个别人也同样发生了这样的情况 注 xff1a

  • 拓扑排序(队列实现)

    什么是拓扑排序呢 xff1f 就是将一个有向无环图中所有顶点在不违反先决条件关系的前提下排成线性序列的过程称为拓扑排序 学拓扑排序有什么用呢 xff1f 当然有用啦 比如说学校排课的时候 xff0c 会考虑到有的课程需要先修 我们学完C程序

  • Arch的VBox安装笔记

    Arch Version archlinux 2015 12 01 dual Virtual Box Version 5 0 16 r105871 Update xff1a 2016 03 26 17 08 18 1 分区 xff08 cf

  • Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file

    maven打包报错 org springframework boot maven BuildInfoMojo hasbeen copiled by a more recent version of the Java Runtime clas

  • 前端JS接收服务端的二进制文件流实现文件下载

    前端JS接收服务端的二进制文件流实现文件下载 var binaryData 61 binaryData push res 改成Boole或者file类型 const url 61 window URL createObjectURL new

随机推荐

  • debian10ssh配置用户限制，日志等

    需求 xff1a 工作端口为2021 xff1b 只允许用户user01 xff0c 密码ChinaSkill21登录到router 其他用户 xff08 包括root xff09 不能登录 xff0c 创建一个新用户 xff0c 新用户可

  • CentOS搭建PySpider爬虫服务

    1 环境准备 前置环境部署 在开始部署前 xff0c 我们需要做一些前置准备 yum 更新 yum span class hljs operator span class hljs keyword update span y span 安装

  • openGauss5.0企业版CentOS单节点安装

    目录 一 安装环境 二 前置依赖包 三 安装前准备1 四 安装前准备2 五 安装 一 安装环境 CPU xff1a 2核 内存 xff1a 4G 磁盘 xff1a 20G 操作系统 xff1a CentOS 7 9 python版本 xff

  • SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能

    本文针对那种想要快速实现功能 xff0c 而不是研究原理的 xff0c 那你就直接复制我的东西 xff0c 运行就好 如果想深入学习的同学请另行百度 第一种 Spring Boot 43 Thymeleaf 使用PageHelper实现分页

  • Idea集成使用SVN教程

    idea 从项目窗口跳到打开项目选项窗口 操作之后即可跳到如下界面 第一步 下载svn的客户端 xff0c 通俗一点来说就是小乌龟啦 xff01 官网下载地址 xff1a Downloads TortoiseSVN 下载之后直接安装就好了

  • IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结

    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结 请叫我大师兄 CSDN博客 ideasvn配置 https blog csdn net qq 27093465 article details 74898489 首先 x

  • webpack 错误

    1 ERROR in src main css Module build failed from node modules mini css extract plugin dist loader js ReferenceError docu

  • 客户端js 读取 json 数据

    采用 XMLHttpRequest 读取 1 new 初始化 XMLHttpRequest 2 open 设置请求方式 xff0c 地址 3 send 发起请求 4 onload 请求成功 xff0c 返回结果 代码 xff1a lt DO

  • dataTable的中文文档

    DataTables Table plug in for jQuery https datatables net 用google 打开 xff0c 直接翻译 参考 选项 DataTables 及其扩展是极其可配置的库 xff0c 它们对 H

  • nodejs核心API

    1 Buffer对象 不需要引入 Bufferd对象用途 以二进制流进行数据的传送传递 1 三种创建方式 类似于数组的创建 用16进制存储 let buf1 61 Buffer alloc 20 13 console log buf1 lt

  • mysql select， from ，join ，on ，where groupby,having ,order by limit的执行顺序和书写顺序

    mysql select xff0c from xff0c join xff0c on xff0c where groupby having order by limit的执行顺序和书写顺序 关键字或 解释执行顺序select 查询列表 x

  • jQuery对checkbox的各种操作

    注意 xff1a 操作checkbox的checked disabled属性时jquery1 6以前版本用attr 1 6以上 xff08 包含 xff09 建议用prop 1 根据id获取checkbox 34 cbCheckbox1 3

  • dom 操作排他思路

    1 遍历所有 xff0c 操作 xff0c 对具体的重新操作 实现点击一个按钮就把背景颜色改为pink颜色 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta

  • web前端兼容

    兼容性 xff1a Compatibility overview https www quirksmode org compatibility html 当前测试 CSS所有 CSS 选择器和声明 xff08 最终 xff09 DOM所有

  • 使用跨域资源共享的 DOM 访问控制

    Dev Opera DOM Access Control Using Cross Origin Resource Sharing https dev opera com articles dom access control using c

  • react-typescript 错误

    64 types jsurl index d ts 39 is not a module npm i jsurl 安装错误 xff0c 因为 typescript无法用此方法安装 xff0c 卸载干净 1 增加types目录 新建jsurl

  • react-router-dom错误

    index tsx 24 Uncaught Error useLocation may be used only in the context of a lt Router gt component at invariant index t

  • Total Blocking Time 总阻塞时间 (TBT)

    总阻塞时间 TBT 是测量加载响应度的重要实验室指标 xff0c 因为该项指标有助于量化在页面交互性变为可靠前 xff0c 不可交互程度的严重性 xff0c 较低的 TBT 有助于确保页面的可用性 什么是 TBT xff1f 总阻塞时间 T

  • JavaScript中的回调的作用是什么

    这期内容当中小编将会给大家带来有关JavaScript中的回调的作用是什么 xff0c 文章内容丰富且以专业的角度为大家分析和叙述 xff0c 阅读完这篇文章希望大家可以有所收获 回调函数 首先写一个向人打招呼的函数 只需要创建一个接受 n

  • css如何换行

    在css中通过word break与white space这两个属性来设置自动换行 xff0c 其中word wrap属性允许长单词或URL地址换行到下一行 xff1b 而white space属性可以设置文本换行方式 本文操作环境 xff

热门标签