zoukankan      html  css  js  c++  java
  • 文本超出标签宽度不换行问题

    今天尝试了新属性:

      1.word-wrap:break-word;  

    解决对象:字符串长度超过标签规定宽度;

      2.word-break: break-all;

    解决对象:  单词折断;

    问题展示:

    比如设定了宽度的p标签:

    css代码

    p{
       150px;
      background-color: lightblue;
      margin: 10px auto;
      padding: 10px;
      color: red;
      }
    

    html代码

    <p>今天的天气不错,如果你感到开心的话,那就跳一支舞吧!</p>
    <p>abcdefghijklmnopqrst...</p>
    <p>abcdefghijklmnopqrst...太胖</p>
    <p>胖否?abcdefghijklmnopqrst...</p>
    

    需要换行的时候怎么不换行呢?我们这样写css样式吧!

    p{
       150px;
      background-color: lightblue;
      margin: 10px auto;
      padding: 10px;
      color: red;
      -webkit-word-wrap: break-word;
      -moz-word-wrap: break-word;
      -ms-word-wrap: break-word;
      -o-word-wrap: break-word;
      word-wrap: break-word;
      }
    

     再来看一下效果:

    ok,问题解决了一部分。。

    试试另一个属性吧~

    p{
       150px;
      background-color: lightblue;
      margin: 10px auto;
      padding: 10px;
      color: red;
      -webkit-word-break: break-all;
      -moz-word-break: break-all;
      -ms-word-break: break-all;
      -o-word-break: break-all;
      word-break: break-all;
      }
    

    效果:

    问题完美解决!!!

    果果们,睡觉吧,欢迎交流,谢谢阅读,晚安!

  • 相关阅读:
    rsync 服务器配置过程
    百度基础技术总结
    利用cobbler无人值守批量安装centos
    安装批量装机工具cobbler过程
    面试题
    JS作用域
    原型链
    ES6优缺点
    PostCSS理解与运用
    置换元素和非置换元素
  • 原文地址:https://www.cnblogs.com/mihoutaoguniang/p/6185168.html
Copyright © 2011-2022 走看看