zoukankan      html  css  js  c++  java
  • html/css实现文字自动换行,超出部分出现(...)

    PS:这是我在别人博客copy下来的

    做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时,你会发现这些文字不会自动换行,如果控制的不对,它有可能冲出父元素…

    原因是: 
      英书字母之间如果没有空格,系统以为是一个单词,就不会BUTO换行。汉字就没有这种情况。

    • 一行文字

              当有一行文字的时候,如果想让超出部分出现(…),可以这样写:

               .wrap{

                      overflow: hidden;

                      text-overflow: ellipsis;

                      white-space: nowrap;

                       118px;

                }

    • 多行文字 

             当有多行文字的时候,可以这样写:

            .wrap{

                 220px;

                 height: 72px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                word-break: break-all;

            }

  • 相关阅读:
    docker生产——容器通信
    .net core集成JWT(基础)
    JWT基本概念
    MySQL数据更新
    MySQL查询练习2
    C语言程序设计之字符串处理
    MySQL查询练习
    博客文章搬迁
    C语言程序设计之 数组2020-10-28
    Java方法重载浅谈
  • 原文地址:https://www.cnblogs.com/Alexin/p/3582240.html
Copyright © 2011-2022 走看看