4要素:


width: 125px;  //宽度必须

text-overflow: ellipsis/clip; //省略号或裁剪;

white-space: nowrap;//强制内容在一行显示;

overflow: hidden; // 超出隐藏

多行

text-overflow: ellipsis;

-webkit-line-clamp: 2;

display: -webkit-box;//必须

-webkit-box-orient: vertical;//必须

CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程的更多相关文章

  1. CSS基础:text-overflow:ellipsis溢出文本

    <!DOCTYPE html><html> <head> <title> new document </title> <meta na ...

  2. 使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题

    本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;( ...

  3. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  4. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  5. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  6. 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处

    使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...

  7. text-overflow:ellipsis ,溢出文本显示省略号

    text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...

  8. css text-overflow溢出文本显示省略号

    <div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...

  9. css溢出文本显示省略号

    css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...

随机推荐

  1. LaTeX统计文章字数

    今天学会了用LaTeX命令统计文章字数,命令如下: textcount doc_full_path.tex 效果如下:

  2. Mysql 查询当前数据上一条和下一条的记录

    获取当前文件上一条与下一条记录的原理是上一条的sql语句,从news表里按从大到小的顺序选择一条比当前ID小的新闻,下一条的sql语句,从news表里按从小到大的顺序选择一条比当前ID大的新闻. 如果 ...

  3. AOP获取方法注解实现动态切换数据源

    AOP获取方法注解实现动态切换数据源(以下方式尚未经过测试,仅提供思路) ------ 自定义一个用于切换数据源的注解: package com.xxx.annotation; import org. ...

  4. [GPU] Install H2O.ai

    一.前言 主页:https://www.h2o.ai/products/h2o4gpu/ GPU版本安装:h2oai/h2o4gpu 采用GPU,能否成为超越下面链接中实验的存在? [ML] LIBS ...

  5. 安装k8s-1master多node节点

    卸载比较新的18.3版本,安装17.03版本 删除旧版本 sudo yum remove docker \ docker-client \ docker-client-latest \ docker- ...

  6. centos7.5 解决缺少libstdc++.so.6库的原因及解决办法

    centos7. 解决缺少libstdc++.so.6库的原因及解决办法 执行node -v报错如下: [root@bogon ~]# node -v node: error : cannot ope ...

  7. 转:微服务框架之微软Service Fabric

    常见的微服务架构用到的软件&组件: docker(成熟应用) spring boot % spring cloud(技术趋势) Service Fabric(属于后起之秀 背后是微软云的驱动) ...

  8. DRF视图-5个扩展类以及GenericAPIView基类

    视图 5个视图扩展类 视图拓展类的作用: 提供了几种后端视图(对数据资源进行曾删改查)处理流程的实现,如果需要编写的视图属于这五种,则视图可以通过继承相应的扩展类来复用代码,减少自己编写的代码量. 这 ...

  9. 启动hive,提示ls: 无法访问/home/software/spark-2.0.1-bin-hadoop2.7/lib/spark-assembly-*.jar: 没有那个文件或目录

    原因是:spark升级到spark2以后,原有lib目录下的大JAR包被分散成多个小JAR包,原来的spark-assembly-*.jar已经不存在,所以hive没有办法找到这个JAR包. 解决办法 ...

  10. Linux用户管理命令介绍

    1)管理用户命令总汇 2)管理用户组命令 总汇