让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,一经查实,立即删除!

相关文章

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

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

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

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

NuGet包管理平台

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

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

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

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

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

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…

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…

python3 最简单的实现 模版设计模式

在项目开发过程时&#xff0c;遇见某些子类的逻辑处理流程大致相同&#xff0c;可是用模板模式减少代码冗余&#xff0c;降低耦合。 例如实现某一窗体或者页面启动时&#xff0c;第一步需要加载启动界面图片资源&#xff0c;第二步加载个人信息&#xff0c;第三步加载个人钱包…

玩转CSS选择器(一) 之 使用方法介绍

前言 前几天整理了CSS一些技术关键字&#xff0c;但是因为自己的知识过于单薄&#xff0c;觉得考虑的不充分有欠缺&#xff0c;随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些&#xff1f;》&#xff0c;也是为了让厉害的人一起参与进来&#xff0c;用他们的经验…

php基础-1

//echo "hello","aaaa";//输出语法&#xff0c;可以输出多个字符串//print "world"; //可以输出&#xff0c;只能输出一个字符串 用"."拼接可以输出&#xff0c;用","拼接直接报错 //数据类型 int,double,float,string,char…

工业相机和普通相机的区别详解_数码单反相机和胶片单反相机的区别

从相机出世到现在&#xff0c;相机的种类可以分为两种&#xff0c;一个是早期的胶片相片&#xff0c;另一个是现在的数码相机&#xff0c;数码相机的种类也是有很多种&#xff0c;其中最为常见就是单反相机了。那么今天我们就来看看胶片机和单反的区别。相机的种类总的来说可以…

ArcGIS 10.6 Data Interoperability Tools的安装与使用(附安装包下载)

ArcGIS平台中提供了一个数据交互操作工具Data Interoperability Tools,安装Desktop的时候不是一并安装的,这样导致Data Interoperability Tools工具箱下的工具(如Quick Import)全面有一个红色的叉号,无法正常使用,解决办法是手动安装Data Interoperability Tools,位于软…

女朋友强依赖我!我引入IOC后,从此我们的关系微妙而稳固!

此文从面向对象设计角度分析依赖倒置原则&#xff0c;引入依赖注入&#xff0c;IOC相关内容进行探讨&#xff0c;文中引用女朋友案例可能引起分手风险&#xff0c;故理解为 new 对象。想起在学校的时候&#xff0c;有一个任务就是设计一款宠物商店项目。那时候引入三层架构设计…

Qt 第二步 槽与信号(一) 实现点击按钮并弹窗

信号与槽是Qt中的核心&#xff0c;也是Qt的特有的。在Qt中信号与槽的关键字为slots、signals、emit。 具体信号与槽将会在下一节中详细说明&#xff0c;因为担心一些读者在没了解过槽与信号前直接讲述过深导致门槛提高&#xff0c;阅读困难&#xff0c;所以当前这一篇文将在不理…

语言 分组计算hr_干货 | HR不得不知的面试技巧

面试是求职者倍感煎熬的时刻&#xff0c;但其实&#xff0c;面试也让不少HR们颇有压力。毕竟&#xff0c;要在短时间内快速了解一个人&#xff0c;并判断是否适合岗位、业务部门会不会满意、能不能适应企业文化等并不容易。所以&#xff0c;今天Anna给大家整理了一份面试问题汇…

python3 爬虫第一步 简单获取网页基本信息

注&#xff1a;本系列专栏需要有简单的python3 语言基础 爬虫的相关作用在此就不再说明&#xff0c;相信能够点进该系列文章的读者都已经了解了爬虫是什么&#xff0c;并且能够做什么。由于是发布在互联网的文章&#xff0c;所以系列文章都不以书籍的方式从头到尾的叙述作用及其…

将旧版 WCF 应用程序迁移到 CoreWCF

前言CoreWCF 项目团队发布了 CoreWCF 的 1.0 版本&#xff0c;这是 WCF 到 .NET Core 平台的移植。我觉得&#xff0c;CoreWCF 适用于这类场景使用——基于 WCF 的旧版应用程序已在 Windows 平台上运行了很多年&#xff0c;但是希望将代码迁移到 .NET Core&#xff0c;以利用 L…

记录我的学习历程--二维数组解决平面图形题

打印出3 7 2 4 6 81 5 9代码如下转载于:https://blog.51cto.com/4139737/1684269