zoukankan      html  css  js  c++  java
  • 手机端展示 如何在不改变原来文字格式的基础上,使文字自动换行?

    如何使元素里的内容自动换行

    pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

    今天遇到了一个棘手的问题,当从数据据库中取出数据,放在jsp页面显示时,发现内容都堆积在了一块,没有换行,看着很难受。但是在控制台输出,换行却被保留着。

    这时候就想到了使用<pre>元素。

    pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

    但问题又来了,使用<pre> 元素,固然保留了原内容中的换行符,但页面中没有实现了自动换行,导致每行的长度过长,影响阅读。

    并且,从H4开始<pre>中可以定义每行最大字符数的“width”属性,就已经不被赞成使用。

    可行的解决方法是结合使用CSS。

    CSS的white-space属性用于指定如何处理容器中的空白字符。

    white-space出自CSS1,适用于块状元素,具有继承性,支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器,其默认值为normal。

    我们来看一下white-space可选的属性值: 
    这里写图片描述

    注意到“pre-wrap”属性值:保留空白符序列,但是正常地进行换行。

    找到了! 使用“pre-wrap”属性值就可以完全满足我们的要求。

    对应的CSS规则是:

    <style>
    
        pre{
        white-space:pre-wrap;
        word-wrap:break-word;
        }
    
    </style>

    这样,<pre>里的内容就可以自动换行了。

  • 相关阅读:
    Java 运动模糊
    Efounds笔试
    Algorithms code
    Java 画图
    Java 笔记
    Java 对二值化图片识别连通域
    工厂模式
    数据库克隆
    SQL优化
    微信调起jssdk一闪而过
  • 原文地址:https://www.cnblogs.com/lendar/p/10172648.html
Copyright © 2011-2022 走看看