草庐IT

巧用css属性white-space展示文本

七分暖 2023-03-28 原文

写在前面的话

  大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉,这的确大大的使得文本的排版更加美观了,也怎加了区域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢?无外乎把不该去掉的空格展示出来,把不该合并的换行让它换行起来。  

  那么 white-space  作用具体是什么呢?在MDN 上的解释为 :

  • 空白字符是否以及如何它们该如何合并。
  • 行是否采用软换行(软换行可以理解为受到父容器宽度的影响,为了避免不超出父容器而自发的换行)。

white-space的关键值

  • white-space:normal
  • white-space:nowrap
  • white-space:pre
  • white-space:pre-wrap
  • white-space:pre-line
  • white-space:break-spaces

关键值逐个解析

white-space:normal

连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充时是必要。也就是说不管是文本中是否有空白符和换行符都会被省略。并且遇到父容器需要换行填充的时候也会自动换行。大多数的标签white-space都是normal 。

html实例代码如下:

white-space:normal
<fieldset>
    <legend> white-space:normal</legend>
    <div class="normal">
        这是第一行,我的后面有五个空白符 我的前面有五个空白符 我的前面有三个空白符并且我的尾巴有换行符
        这是第二行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />我的前面有br标签,我的后面有五个空白符
        这是第三行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />
    </div>
</fieldset>

显示效果如下:

white-space:nowrap

和 normal 一样,连续的空白符会被合并。但文本内的换行无效。只有使用br标签才能换行,并且不进行软换行。

html实例代码如下:

white-space:nowrap
 <fieldset>
    <legend> white-space:nowrap</legend>
    <div class="nowrap">
        这是第一行,我的后面有五个空白符 我的前面有五个空白符 我的前面有三个空白符并且我的尾巴有换行符
        这是第二行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />我的前面有br标签,我的后面有五个空白符
        这是第三行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />
    </div>
</fieldset>

显示效果如下:

white-space:pre

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

顺带一说标签pre的 white-space的默认属性pre

html实例代码如下:

white-space:pre
 <fieldset>
    <legend> white-space:pre</legend>
    <div class="pre">
        这是第一行,我的后面有五个空白符 我的前面有五个空白符 我的前面有三个空白符并且我的尾巴有换行符
        这是第二行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />我的前面有br标签,我的后面有五个空白符
        这是第三行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />
    </div>
</fieldset>

显示效果如下:

white-space:pre-wrap

连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充时才会换行(软换行)。

html实例代码如下:

white-space:pre-wrap
 <fieldset>
    <legend> white-space:pre-wrap</legend>
    <div class="pre-wrap">
        这是第一行,我的后面有五个空白符 我的前面有五个空白符 我的前面有三个空白符并且我的尾巴有换行符
        这是第二行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />我的前面有br标签,我的后面有五个空白符
        这是第三行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />
    </div>
</fieldset>

显示效果如下:

white-space:pre-line

连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充时会换行(软换行)。

html实例代码如下:

white-space:pre-line
 <fieldset>
    <legend> white-space:pre-line</legend>
    <div class="pre-line">
        这是第一行,我的后面有五个空白符 我的前面有五个空白符 我的前面有三个空白符并且我的尾巴有换行符
        这是第二行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />我的前面有br标签,我的后面有五个空白符
        这是第三行,我的后面有九个空白符 我的前面有九个空白符,并且我的后面有br标签<br />
    </div>
</fieldset>

显示效果如下:

white-space:break-spaces

break-spaces 与 pre-wrap的行为相同,也就是说连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充时才会换行(软换行)。除了:

  • 任何保留的空白序列总是占用空间,包括在行尾。如果行尾的空白符够多就会看到空白符占用了一行,pre-wrap 是没有这种现象的。
  • 每个保留的空格字符后都存在换行机会,包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。

html实例代码如下:

显示效果如下:

以下表格是对white-space 各个关键值的综合对比

关键字名称 换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 不换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

 

以上使用的样式部分的公共代码如下:

css公共代码
 <style>
        div {
            border: 1px solid #eee;
            margin: 30px;
            padding: 30px;
            max-width: 400px;
        }

        .normal {
            white-space: normal
        }

        .nowrap {
            white-space: nowrap
        }

        .pre {
            white-space: pre
        }

        .pre-wrap {
            white-space: pre-wrap
        }

        .pre-line {
            white-space: pre-line
        }

        .break-spaces {
            white-space: break-spaces
        }
 </style>

总结:

  在不知道有这个属性的时候,往往会想到将换行符替换成<br/>标签进行换行,现在要实现同样的效果,设置一下white-space的值就搞定了。快的呢!

有关巧用css属性white-space展示文本的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  4. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  5. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  6. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  7. ruby-on-rails - Rails 模型——非持久类成员或属性? - 2

    对于Rails模型,是否可以/建议让一个类的成员不持久保存到数据库中?我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量,我想将值存储在一个“虚拟”类成员中,该成员只是将值传递回Controller。你能有这样的类(class)成员吗? 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中,所有实例变量都是私有(private)的,不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  8. css - 用 watir 检查标签类? - 2

    我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  9. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑,但请耐心等待。简而言之,我想遍历具有特定键值的所有属性,然后如果值不为空,则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  10. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么? - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人?如何根据它对它们进行排序? 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

随机推荐