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;
      }
    

    效果:

    问题完美解决!!!

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

  • 相关阅读:
    第13章 使用ADO.NET访问数据库
    第11章 连接查询和分组查询
    第10章 模糊查询和聚合函数
    第9章 数据查询基础
    数据库前三章测试题
    用表组织数据
    程序数据集散地:数据库
    深入C#的String类
    线程池
    hadoop-2.8.0 完全分布式运行模式
  • 原文地址:https://www.cnblogs.com/mihoutaoguniang/p/6185168.html
Copyright © 2011-2022 走看看