css:white-space及文本回车换行符

简介: css:white-space及文本回车换行符

文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space


语法

white-space: normal;

可选值

2.png

示例:

说明:以下句子在每个句号后面都有一个回车符

“第一原则思维”在当今备受推崇。 
作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。 
创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。 
同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。
<style>
  .box {
    width: 500px;
    margin: 0 auto;
    border: 1px solid #666666;
  }
  .box-title {
    text-align: center;
    margin-top: 20px;
    color: red;
  }
  .white-space--normal {
    white-space: normal;
  }
  .white-space--nowrap {
    white-space: nowrap;
  }
  .white-space--pre {
    white-space: pre;
  }
  .white-space--pre-wrap {
    white-space: pre-wrap;
  }
  .white-space--pre-line {
    white-space: pre-line;
  }
  .white-space--break-spaces {
    white-space: break-spaces;
  }
</style>
<body>
  <div class="box">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
  <div class="box-title">white-space: normal</div>
  <div class="box white-space--normal">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
  <div class="box-title">white-space: nowrap</div>
  <div class="box white-space--nowrap">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
  <div class="box-title">white-space: pre</div>
  <div class="box white-space--pre">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
  <div class="box-title">white-space: pre-wrap</div>
  <div class="box white-space--pre-wrap">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
  <div class="box-title">white-space: pre-line</div>
  <div class="box white-space--pre-line">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
  <div class="box-title">white-space: break-spaces</div>
  <div class="box white-space--break-spaces">“第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是,运用你的“特定知识”( specific knowledge),在别人的生活中创造价值。
    同时,利用诸如劳动力(labor)、资本(capital)、技术(technology)和社会资本( social capital)等杠杆充分撬动自己的“特定知识”,我们就能将特定知识规模化,更好地实现创业目的。</div>
</body>

各参数实现效果(点击图片放大查看)

3.png

方案一:

css控制回车换行

white-space: pre-wrap;

方案一:

js正则匹配所有回车,替换为换行符

content = content.replace(/\n/g, '<br/>');
相关文章
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
1月前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
|
1月前
编程笔记 html5&css&js 006 HTML文本:标题
编程笔记 html5&css&js 006 HTML文本:标题
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
27 0
|
3月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
39 0
|
3月前
|
前端开发
css实现单行文本溢出以及多行文本溢出
css实现单行文本溢出以及多行文本溢出
|
3月前
|
前端开发 容器
css英文文本不换行,css怎么实现英文不换行
css英文文本不换行,css怎么实现英文不换行
|
3月前
|
自然语言处理 前端开发 容器
深入研究 CSS 文本换行
深入研究 CSS 文本换行
|
15天前
|
前端开发 JavaScript UED
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
60 0
|
4月前
|
前端开发
使用 CSS 的水波文本动画(免费代码)
使用 CSS 的水波文本动画(免费代码)
58 0