让DIV中文字换行显示

让DIV中文字换行显示

1.

复制代码
<style>div{white-space:normal;word-break:break-all;word-wrap:break-word; }</style><div style=" width:100px; border:1px solid red">I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
复制代码

未加css前效果:------->加上效果:

 

2.这三句重点在于:word-break与word-wrap

a:word-break  属性规定自动换行的处理方法。

提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。

描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all

只能在半角空格或连字符处换行。

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

描述
normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。

还是看示例:

复制代码
<style>div{  word-wrap:break-word; }</style><div style=" width:100px; border:1px solid red">I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
复制代码

结果:

将dobiiiiiiiiiiiiiiiiiii做为一个整体进行换行显示。

 

复制代码
<style>div{word-break:break-all;}</style><div style=" width:100px; border:1px solid red">I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
复制代码

结果:

将dobiiiiiiiiiiiiiiiiiii截断进行换行显示。

我想这下这两个的区别应该很清楚了吧!

若转载请注明出处!若有疑问,请回复交流!

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

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

相关文章

C# numericUpDown控件用法总结及注意事项

numericUpDown控件在使用的过程当中,有些用法会不太一样,下面做一总结。 1. 判断numericUpDown的value属性是否为空 使用过Numericupdown控件的童鞋初期应该都会碰到一个奇怪的问题,在删除了控件里的值之后,里面实际上还是有数据的,所以也没办法判断非空了。 这里我觉得是…

WPF效果第一百八十三篇之无缝循环滚动

这不最近一直都在瞎玩Xamarin,渐渐的把WPF给冷落的;假期前突然收到一个着急的模糊不清的需求:图片无缝循环滚动;由于着急我就比较偷懒直接用了很low的方式实现了一版:1、前台就是直接Canvas嵌套StackPanel:<Canvas ClipToBounds"True" x:Name"RootCanvas&quo…

看得懂的外观设计模式 python3 实现

外观设计模式在平常的代码编写中&#xff0c;会经常使用。在平常代码的编写时&#xff0c;即使程序员没有从标准上认识过外观设计模式&#xff0c;但在开发的过程中&#xff0c;也会从代码的多方面角度考虑&#xff0c;从而编写了符合外观设计模式的代码。 很多程序员都有这种…

剑指offer之快速排序

1 快速排序 通过一趟排序将要排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据都比另外一部分的所有数据都要小&#xff0c;然后再按此方法对这两部分数据分别进行快速排序&#xff0c;整个排序过程可以递归进行&#xff0c;以此达到整个数据变成有序序列 2 分析…

机器学习------精心总结

1.数学 偏差与方差拉格朗日核函数凸优化协方差矩阵Hessian矩阵CDF&#xff08;累计分布函数&#xff09;高斯概率密度函数中心极限定理2.机器学习 Java 机器学习 工具 & 库 1.处理小数据效果好 2.深度学习—大数据&#xff0c;超过500w&#xff1b;图像&#xff0c;语言方…

mysql命令去重_MySQL去重的方法整理

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

NuGet包管理平台

这节来讲一下.NET下的包管理平台&#xff1a;NuGet。简介我们做一个项目&#xff0c;除了自己的代码文件之外&#xff0c;实际上还要引用诸多代码文件&#xff0c;这些文件可能是我们自己封装的底层框架代码&#xff0c;或者为了完成某个功能而引用的工具类文件等等。在.NET里边…

【ArcGIS风暴】ArcGIS影像批量裁剪(分幅)方法总结

实际工作中经常需要采用规则格网或标准分幅格网去对影像进行分幅。ArcGIS提供了强大的影像批量裁剪(分幅)的功能,常规的方法是利用掩膜提取工具手工重复裁剪,费时又费力,裁到让GISers怀疑人生。。。。。当然了如果你是个码农,会使用Python语言的话就很简单了。前面也有文…

Python变量的复制

Python变量的复制 dic {a: 1} dic_fake_copy dic dic_fake_copy.update({b: 2}) print dic_fake_copy %s % dic_fake_copy print dic %s % dic 输出结果为&#xff1a; In [6]: print dic_fake_copy %s % dic_fake_copy dic_fake_copy {a: 1, b: 2}In [7]: print dic %s…

看得懂的设计模式 享元模式python3 最基本(简单)实现

在考量系统内存合理使用时&#xff0c;通过享元模式可降低性能压力以及降低资源占用&#xff1b;主要实现是通过共享数据这一思想实现资源的合理分配。 在开发项目时&#xff0c;很多情况下会存在过多的相似对象&#xff0c;该对象有相同的共同点&#xff0c;该共同点在程序设…

剑指offer之最小的K个数

1 问题 输入N个整数&#xff0c;找出其中最小的K个&#xff0c;例如输入数组6、5、1、4、 2、 7、 3、 8&#xff0c;最小的4个数是1、2、3、4 2 分析 1&#xff09;我们可以用快速排序从小到大&#xff0c;但是时间复杂度是O(nlogn) 我们取出最前面的K个数就行。 2&#xf…

JCheckbox全选

在实际的使用过程中的一些小技巧。在图形界面的编程中&#xff0c;复选框一般是多个在一起&#xff0c;如果要进行全选时&#xff0c;则要将复选框全部设置setSelected为true&#xff0c;那么如果当前容器里面的复选框很多的时候怎么办呢&#xff0c;我们可以采用向下转型来完成…

creo管道设计教程_CREO/PROE产品设计教程之四芯花线建模,加深对关系式的认识...

阅读完&#xff0c;如果觉得有用&#xff0c;那么点击"关注"和点赞是对作者的一种尊重和鼓励。版权所有&#xff0c;抄袭必究。春节前&#xff0c;基本敲定和相关知名出版社在2020年的图书创作及出版计划。文&#xff1a;钟日铭我曾经介绍过三芯"花线"建模…

如何使用JWT进行身份验证与授权

简介JWT定义了一种紧凑的、自包含的方式&#xff0c;用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任&#xff0c;因为它是数字签名的。工作流程1、用户使用账号、密码登录应用&#xff0c;登录的请求发送到认证服务器。2、认证服务器进行用户验证&#xff…

云应用基础技术成熟需七年时间

本文讲的是云应用基础技术成熟需七年时间&#xff0c;【IT168 资讯】市场研究机构Gartner, Inc.近期认为尽管云计算市场目前正处于活跃、增长和高潜力时期……  市场研究机构Gartner,Inc.近期认为尽管云计算市场目前正处于活跃、增长和高潜力时期&#xff0c;但是在云计算或服…

Qt 第一步 HelloWorld 的第一个程序

简言 Qt 是基于C的 GUI 解决方案。QT简单易学&#xff08;底层封装的好&#xff09;、跨平台、相关资料易得到。 开始写Qt 相关的文章的主要原因是&#xff0c;我本人在编写一个视频录制及相关处理的项目&#xff0c;写到一半发现.net winform 相关UI的处理限制较大&#xff…

ArcGIS 10.x属性表乱码问题解决办法

ArcGIS 10.x的版本&#xff0c;文件属性表老出现乱码的问题。 解决方法&#xff1a;在Cmd命令行中输入以下命令&#xff1a; reg add HKEY_CURRENT_USER\Software\ESRI\Desktop10.6\Common\CodePage /v dbfDefault /t REG_SZ /d 936 /f 版本找对应的该就行&#xff0c;10.2 …

SAP MM 采购订单收货被取消了还是不能增加新的delivery cost!

SAP MM 采购订单收货被取消了还是不能增加新的delivery cost! PO# 8500015169, we did GR and cancelled GR, there is no IR for this PO at present. ME22N, try to add a delivery cost ZCIP in the item, You cannot enter new delivery costs Message no. V1631 Diag…

样式中文字和图片对齐问题

html中&#xff0c;在图片和文字对齐的时候&#xff0c;一直没有达到想要的对齐效果&#xff0c;发现使用position中的相对定位绝对定位paddingmargin可以达到需要的效果。转载于:https://www.cnblogs.com/TheoryDance/p/5424456.html

webots仿真报警[ERROR] [1703399199.459991029]: Sampling period is not valid.

一、故障现象 在运行interace传感器使能程序时&#xff0c;报警[ERROR] [1703399199.459991029]: Sampling period is not valid. [ERROR] [1703399199.460080083]: Failed to enable lidar.并发生崩溃。 二、解决方式 1、尝试将程序中的TIME_STEP数值改为与WOrldInfo中的bas…