zoukankan      html  css  js  c++  java
  • 标签内显示文字超过行宽度显示省略号

    在table中或者一些特殊的需求情况下,需要展示部分文字并在title中显示全部信息,例如一个简短的说明如果超过15个字就显示省略号

    以前自己做的时候都是通过js或者razor语法来实现,但是这样却有一个缺陷,不能自适应页面或者说屏幕的分辨率。当屏幕分辨率改变时,页面就会变形了。

    这里给出一个解决方案,采用css技术来实现相应的功能。

    页面代码如下:

     <td>
             <a class="textbox" title="@(item.Note == null ? "" :item.Note)">@item.Note</a>
    </td>

    用a标签把要显示的内容包括起来,其中加上title,class 

    css代码:

    .textbox{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        display: block;
        word-break: break-all;
        word-wrap: break-word;
    }

    这样就实现了页面自适应显示部分文字,全部内容在title中显示。

    有问题以后再改进。

  • 相关阅读:
    学生信息管理系统
    设计模式,单例模式
    基础考试题(1)
    基础考试题(0)
    python面向对象进阶
    python面向对象
    Python反射
    14 定时器
    13 JS中的面向对象
    12 DOM操作的相关案例
  • 原文地址:https://www.cnblogs.com/zhaokunbokeyuan256/p/6064896.html
Copyright © 2011-2022 走看看