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

网站如何做seo推广方案/自己创建网页

网站如何做seo推广方案,自己创建网页,衡水景县专业做淘宝网站公司,我要申请邮箱写在前面: 在写页面的时候,偶尔有时会遇到下图这两种情况,一种是单词过长时会溢出div,一种是直接换行,导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了,本文主…

写在前面:

在写页面的时候,偶尔有时会遇到下图这两种情况,一种是单词过长时会溢出div,一种是直接换行,导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了,本文主要内容有:word-wrap和word-break属性介绍,使用方法,他们之间的区别,浏览器兼容性,demo链接。需要的朋友可以过来参考下,喜欢的可以点个赞,希望能对大家有所帮助。

应用场景:

属性的应用场景

word-wrap和word-break是什么?

在mozilla的官网上找到如下的解释:

word-wrap的英文解释

word-break的英文解释

经过翻译:word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句

何谓单词内断句?

这个单词没有发生单词内断句的情况,这个单词太长了,溢出了容器的范围。

下面是发生了单词内断句的情况实例:

这里面分别使用了word-wrap:break-word;和word-break:break-all;这里可以看到,效果是一样的,下面再说说他们的区别。

word-wrap的属性介绍

w3c:word-wrap

word-wrap的浏览器支持情况:

所有浏览器都支持

语法:

/* 二选一 */
word-wrap: normal;
word-wrap: break-word;复制代码

解析:

normal就是大家平常见得最多的正常的换行规则,break-word如果长单词超出了一行的长度的话,在一行中有可以换行的标点时就换行,实在没有可以换行的地方时,才在单词中间换行。(这句的解析入下图)

上图就是:一行中有可以换行的标点时就换行实在没有可以换行的地方时,才在单词中间换行

word-break属性的属性介绍:

w3c上关于word-break属性的介绍

浏览器支持:

除了opera不支持以外,其他都支持(火狐也从不支持改为支持了)!

语法使用:

/* 默认normal */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;复制代码

解析:几个关键字值的含义如下:
normal
使用默认的换行规则。

break-all
允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。(这里是CJK中文,日文,韩文的意思)

keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。(一致性可看下图的demo效果)

word-break:break-all和word-wrap:break-word之间的区别:

其实可以从上述demo栗子中看出来:

word-break:break-all碰到英文单词统统都换行,只要到了容器的边界就会换行不浪费一点空间,一点空隙都不放过。

word-wrap:break-word在一行中有可以换行点时就换行实在没有可以换行的地方时,才在单词中间换行。

这里所说的换行点指的是:如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,让这些换行点换行,至于对不对齐,好不好看,则不关心,因此,很容易出现一片一片牛皮癣一样的空白的情况。

后话:

以上就是本文的内容了,其实大概分清他们的区别,以后碰到这类型问题,知道需要用哪个属性来解决就好了

最后:因为我经常看不懂别人写的分享,所以个人写文比较偏小白,写的不好之处,欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我,现在这阶段基本上每个月都不会少于十五篇文章(看到干货我也会进行分享)。码字不易,感谢支持!
ps:目前待业,坐标北京,求推荐工作。然后希望我写哪方面的文章可以在底下评论,或者是私信我,虽然写的不好,但我就当这是记录自己成长的一种方式咯。(前提是我会了,如果不会我也会记下来,等会了的时候再更出来。)
掘金个人主页 ,简书主页链接csdn博客主页链接 ,github 。

参考链接:

word-break:break-all和word-wrap:break-word的区别

你真的了解word-wrap和word-break的区别吗?

CSS3 word-wrap 属性

CSS3 word-break 属性

http://www.lbrq.cn/news/928135.html

相关文章:

  • 企业公司有哪些/佛山优化推广
  • 网站图片验证码出不来/如何优化网站排名
  • 河北沧州疫情最新消息今天/seo推广费用
  • 好网站不收藏/百度怎么优化网站关键词
  • 如何用爬虫做网站监控/游戏推广员一个月能赚多少
  • 软件下载官网源码/淘宝seo
  • 招标网站建设招标方案/怎么创建自己的网站
  • 双轨网站开发/网络推广具体内容
  • 南京网站建设公司哪家好/seo指搜索引擎
  • 为第三方网站做推广/企点官网
  • 建站教程流程图/个人网站搭建
  • 怎样制作网页且有链接/外链seo推广
  • 花生壳做网站/seo神器
  • 武威 网站建设/优化官网咨询
  • 南宁网站建设哪家公司实力强/站长工具无内鬼放心开车禁止收费
  • 如何在阿里云自主建网站/今日新闻最新消息50字
  • 棋牌软件开发源代码/东莞优化网站关键词优化
  • 360帝国模板网欢迎大家来访_济南网站建设/推广_济南 去114网/保定seo建站
  • 济南做网站找哪家好/公众号seo排名
  • 网站建设企业战略/国外网站制作
  • 上海奉贤网站建设/产品推广文案范文
  • 国家精品资源共享课程建设网站/外贸营销网站
  • 女性开源网站/月嫂免费政府培训中心
  • 网页与网站的区别与联系/seo怎样优化网站
  • 网站设计的工作要求/网络推广运营途径
  • 网页设计与网站建设第02章在线测试/郑州官网网站优化公司
  • 淘宝上做淘宝客的网站/海外seo网站推广
  • wordpress设置收费下载/安卓优化大师手机版下载
  • 视频网站视频预览怎么做的/锦绣大地seo
  • wordpress mp4 插件下载/seo蜘蛛池
  • Java 学习笔记:常用类、String 与日期时间处理
  • Transformer架构全解析:搭建AI的“神经网络大厦“
  • 理解HTTP协议
  • SpringMVC的高级特性
  • 04 基于sklearn的机械学习-梯度下降(上)
  • 【Django】-1- 开发项目搭建