css禁止换行(css计算宽度calc)

  在HTML页面的DIV布局中,如果我们把DIV的宽度当做一个计算公式,让浏览器去自动去计算它们的值是不是很有意思呢?那么今天就说一下,CSS中的一个关于计算的函数 calc()

image.png

  一、calc() 函数介绍

  calc():英文单词calculate(计算)的缩写,是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。

  二、calc() 函数定义

  1、calc() 函数可以计算任何长度的值

  2、calc() 函数支持 "+", "-", "*", "/" 运算;

  3、calc() 函数使用标准的数学运算优先级规则;

  4、特别要注意的是,运算符前后都需要一个空格。

  5、现代浏览器都支持 calc() 函数

  三、控制不自动换行

  1. 使用CSS样式规定

  在样式表中使用“white-space:nowrap;”可以禁止自动换行。这个属性可以被用于任何元素,比如段落、div等。

  2.使用HTML实体

  在HTML中,你可以使用实体来代替空格。实体是一段特殊的代码,可以被浏览器正确的解释。使用“ ”代表一个非断行空白。

  3.使用“pre”标签

  可以使用“pre”标签来表示预定义格式文本。这个标签内的每个字符都被保留,包括空格和换行符。这个标签通常用于显示程序代码或电子邮件等格式化文本。

  4.使用“wbr”标签

  “wbr”标签是一个HTML5的标签,用于控制单词之间的换行。当这个标签被插入到单词内的某一个地方时,如果这个单词在边界处需要换行,那么就在这个地方进行换行。


发表评论

评论列表

还没有评论,快来说点什么吧~