首页 > 其他分享 >css文字换行white-space属性

css文字换行white-space属性

时间:2023-06-16 23:12:30浏览次数:55  
标签:pre 行框 space 换行 white 换行符 空白符 line css

这个文章解释的很细致:

white-space属性被指定为从下面的值列表中选择的单个关键字。

  • normal
    连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。

  • nowrap
    和 normal 一样,连续的空白符会被合并。但文本内的换行无效。

  • pre
    连续的空白符会被保留。在遇到换行符或者
    元素时才会换行。

  • pre-wrap
    连续的空白符会被保留。在遇到换行符或者
    元素,或者需要为了填充「行框盒子 (line boxes)」时才会换行。

  • pre-line
    连续的空白符会被合并。在遇到换行符或者
    元素,或者需要为了填充「行框盒子 (line boxes)」时会换行。

  • break-spaces 与 pre-wrap的行为相同,除了:

  1. 任何保留的空白序列总是占用空间,包括在行尾。
  2. 每个保留的空格字符后都存在换行机会,包括空格字符之间。
  3. 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。

标签:pre,行框,space,换行,white,换行符,空白符,line,css
From: https://www.cnblogs.com/yolocatcat/p/17486661.html

相关文章

  • HTML & CSS 学习总结
    @目录HTMLHTML标签HTML属性HTML表单CSSCSS选择器CSS声明CSS盒模型HTMLHTML(超文本标记语言)是一种用于创建网页的标记语言。它允许我们使用标签来描述网页的结构和内容。简单示例(如何使用标签来创建一个简单的网页):<!DOCTYPEhtml><html><head><title>我的......
  • css小技巧
    文字水平垂直居中文字行高=盒子高<body><div>文字垂直居中</div></body>div{height:40px;width:250px;font-size:16px;background-color:aqua;line-height:40px;text-align:center;}效果:......
  • css常用选择器
    1.常用子元素选择器-选择特定子元素:nth-of-type(n)选择其父级下的第n个元素例如:p:nth-child(2):last-of-type选择其父级下的最后一个元素:nth-child(n)选择其父级下的第n个子元素:nth-last-child(n)选择其父级下的第n个子元素,从最后一个子项计数:nth-last-of-ty......
  • CSS 如何根据背景色自动切换黑白文字?
    在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:一、CSS滤镜实现使用滤镜对文字单独处理,所以需要额外一层标签。然后容器和文字用同一种颜色表示,目的是......
  • 关于display:flex;justify-content: space-between;的最后一个元素无法左对齐的问题解
    1.问题:当使用v-for遍历一个数组,当数字长度不是要进行左右对齐的数字的倍数*(以3为例),无法进行左对齐的问题 解决方法:1.使用watch监听这个数组的长度的变化,判断这个数组的长度是否3%2是不是等于0,如果是为则这个数字追加一个空对象,代码如下:watch:{rowsForm:{......
  • 浅析CSS实现超过3行折叠并显示...查看详情
    要实现效果如下:尾部带查看详情,前面有三个点省略号。之前单独看这个布局,即使借助JavaScript也不是一件容易的事啊(需要计算文字宽度动态截取文本,然后append上三个点和查看详情。vue-clamp就是这么做的,包括很多博客也是这么讲的,但是讲真,如果是个列表,这种不断的判断,肯定不是......
  • tailwindcss基本使用
    目录一、tailwindcss基本使用1、设置tailwind和postcss一、tailwindcss基本使用1、设置tailwind和postcss命令*npminit-y*npmitailwindcsspostcss-cliautoprefixer*npxtailwindinit编辑tailwind.config.jsmodule.exports={content:["./public/**/*.......
  • 2023-06-15 css伪类before、after制作文字两边横线
    <divclass="box">测试</div>···.box{color:#ccc;text-align:center;position:relative;&::after{position:absolute;left:24rpx;top:52%;content:'';width:calc(50%......
  • CSS(语义化标签、多媒体标签、新表单元素、属性选择器、结构伪类选择器、伪元素选择器
    一、HTML5新特性概述HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1语义化标签(★★)以前布局,我们基本用div来做。di......
  • CSS的基本使用
    1.初始css1.1引入方式当读到一个样式表时,浏览器会根据它来格式化HTML文档。有三种:行内样式表(在HTML元素内部)<pstyle="color:white;">学习HTML好简单</p>内部样式表(位于<head>标签内部)<styletype="text/css"></style>外部样式表<linkhref="css/in......