zoukankan      html  css  js  c++  java
  • 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。

    方法/步骤

     
    1. 1

      新建一个html文件,命名为test.html,用于讲解用DIV+CSS实现字符超出宽度就自动换行输出。

      用DIV+CSS实现字符超出宽度就自动换行输出
    2. 2

      在test.html文件内,使用div标签创建一行字符,例如,用英文字符。

      用DIV+CSS实现字符超出宽度就自动换行输出
    3. 3

      在test.html文件内,设置div标签的class属性为myclass,主要用于下面通过该class来设置css样式。

      用DIV+CSS实现字符超出宽度就自动换行输出
    4. 4

      在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

      用DIV+CSS实现字符超出宽度就自动换行输出
    5. 5

      在css标签中,通过div标签的类名myclass来设置样式,定义div标签的宽度为50px,超过宽度时,则隐藏字符(overflow:hidden)。

      用DIV+CSS实现字符超出宽度就自动换行输出
      用DIV+CSS实现字符超出宽度就自动换行输出
    6. 6

      在css标签中,设置white-space属性为normal,word-break属性为break-all,从而实现文字超出宽度就自动换行输出。

      用DIV+CSS实现字符超出宽度就自动换行输出
    7. 7

      在浏览器打开test.html文件,查看实现的效果。

      用DIV+CSS实现字符超出宽度就自动换行输出
      END

     

     
  • 相关阅读:
    前端工程化
    前端模块化CommonJS&ES6
    为什么浮点型运算结果会有误差?
    RequestAnimationFrame知多少?
    CSS三栏布局
    秋招面试
    实现Storage
    Angular
    TypeScript
    微服务架构设计模式
  • 原文地址:https://www.cnblogs.com/deepalley/p/13743539.html
Copyright © 2011-2022 走看看