• 沙里软件

  • ShaliSoft.com [手机站]   办公桌收纳抽屉
  • 首页
  • 博文
  • 演示
  • 管理
  • css中字符换行的一些问题

    网络   2014/4/24 9:07:43

    -------我们在处理文章的内容的过程中由于文章内容混杂有中文、英文、数字等其他字符,而我们常见的英文和数字是无法在包裹元素中自动换行,这往往会导致元素被撑破,如下图所示:

    样式

    css中word-break可以解决这个问题,写个测试页面来做个笔记

    css代码:

     body{font-size:14px;}
     p{ border:solid 1px red;width:200px;}

    html代码:


    <body>
        <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
            123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish       
        </p></body>


    此时的运行效果如开题处所说,下面给p标签加点样式

    css代码:

    .test{ word-break:break-all;}

    效果如下:

    可以发现所有的文字不管是中文还是英文还是数字都可以在包裹的p标签的末尾位置自动强制转行,这会有一个问题,会把本来是一个组合的字符串拆分看影响效果,再看一个

    css代码:

    .test {word-break:hyphenate;}

    效果如下:

    此css将可能会撑破包裹元素的字符段在断字点进行提前换行

    再看

    css代码:

     .test{ word-break:keep-all;}

    效果如下:

    在所有的字符段和字符段之间的空格处换行,保留了所有字符段的完整性。撑破包裹元素

    word-break还有一些属性:

    css代码:

     .test{ word-break:normal;}/*浏览器默认换行*/

     

    如果无需保持单词的完整性,break-all可以解决撑破容器的问题,因为在实际应用过程中不会有长度能超过一个容器宽度的单词,所以hyphenate能解决即要单词完整又能不撑破容器,其次在有些场景下可以采用滚动条或者overflow:hidden等来保持界面的完整。


     

    生活总是催促我们向前


    阅读(794) 分享(0)

    上一篇: 读取EXCEL 单元格 无法读取 空值 不显示
    下一篇: HTML5的语音识别技术x-webkit-speech

  • 精彩推荐

    ◆ ASP.NET 导入excel
    ◆ PHP5.4 + IIS + Win7的配置
    ◆ MySQL5.5安装图解教程
    ◆ 使用new Image()打点时的一个注意事项
    ◆ OutputCache各参数的说明
    ◆ asp.net 格式化显示时间为几个月,几天前,几小时前,几分钟前,或几秒前
    ◆ MySQL性能分析及explain的使用
    ◆ 为什么iPhone只允许升级,不允许降级
    ◆ 微软澄清:盗版用户无法免费升级Win 10
    ◆ 谷歌致歉:已删除地图上机器人向苹果Logo嘘嘘照片
  • 用心做事 不能唯利是图

    • 吊儿
    • 用QQ联系我17905772
  • 搜索


  • 最新文章

    • 导出Excel 格式 mso-number-format
    • 服务器iis支持tls1.2,windows server 2008 r2 中IIS启用TLS 1.2(安装SSL后用TLS 1.2)
    • MySQL配置优化
    • EditPlus 添加文件比较工具winmerge
    • 滚动悬浮固定JS特效

  • 热门文章

    • php sso单点登录实现代码
    • 中国菜刀(China chopper) 最新黑客工具
    • redis.conf中文版(基于2.4)
    • 搜索引擎名单大全
    • php图片上传类,支持加水印,生成略缩图

  • 最新图库


  • 最新评论


  • 友情链接

  • 沙里软件

  • 最近访客

    Powered by ShaliSoft.com 豫ICP备13008529号

    免责声明:本站部分内容来源于互联网,转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,不为其版权负责,也不构成任何其他建议。如果发现侵犯版权,联系QQ17905772进行删除。

    51La