CSS设置溢出文字显示省略号

相关CSS
 .text-ellipse{  width: 100px;height:50px;border:2px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   <div class="text-ellipse">fdsfasgsdafsadf</div>

效果如图:

下面对上文中的几个css属性进行一下讲解

overflow:hidden

这个没啥好说的,就是设置文字操作内容区域的部分不显示。

white-space:nowrap

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow:ellipsis

描述
clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本

CSS设置溢出文字显示省略号相关推荐

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

    CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...

  2. css 控制溢出文本显示省略号效果

    同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果: 转载于:https:/ ...

  3. css文本溢出隐藏显示省略号

    一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...

  4. li 字多出了省略号_文字溢出自动显示省略号css方法 -

    文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...

  5. css文本溢出时候,如何把多余的文字显示省略号

    css文本溢出时候,如何把多余的文字显示省略号 日常做的项目中常常有这种需要我们对溢出文本进行"-"显示的操作(我也是通过一行文字到下一行,破坏了我的布局,所以才去找各种办法,然后 ...

  6. li 字多出了省略号_文字溢出自动显示省略号css方法

    这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...

  7. CSS设置文本不换行多余文字显示省略号

    文章目录 一.使用步骤 一.使用步骤 1.文字单行不换行多余文字显示省略号 代码如下(示例): white-space: nowrap;display: block;overflow: hidden; ...

  8. css单行、多行文本溢出隐藏显示省略号

    单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...

  9. 单行文字溢出隐藏显示省略号

    单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...

最新文章

  1. Valid Sudoku leetcode java
  2. 找不到暑期实习怎么办?
  3. 1.IT-解决方案-1-FTP
  4. 8-[多线程] 进程池线程池
  5. IT管理者年终总结 | 2021年,IT管理者必须领悟到的7个要点
  6. python绘制两个离散变量关系图——马赛克图
  7. 第三方框架-纯代码布局:Masonry的简单使用
  8. Macaca简单入门
  9. Java的I/O总结
  10. EDA实验:数字频率计(FREQ)设计(VHDL)
  11. 无限循环滚动代码阿里巴巴国际站店铺装修代码底图滚动黑色半透明显示效果自定义内容装修代码全屏显示
  12. 1盒子刷Armbian,看这一篇就够了——Armbian全方位安装指导书
  13. C++ Qt自建网页浏览器
  14. 牵手·············
  15. sqlmap 注入教程 常用命令大全
  16. wish新店快速出单的方法
  17. guestbook.php注入,php防注入留言板(simple)
  18. Jenkins高级篇之Pipeline语法篇-7-Declarative Pipeline指令:triggers/stage/tool
  19. XNA学习笔记(5)-调节刷新率(framerate)
  20. 基于JAVA校园疫情防控系统(Springboot框架) 开题报告

热门文章

  1. 【Hello CSS】第三章-浏览器的视图与坐标
  2. 【SOAP-WebService系列】SOAP简述
  3. Chromium扩展(Extension)加载过程分析
  4. Milvus实战| 以图搜视频系统
  5. mysql 单表 子查询_MySQL基本SQL语句之单表查询、多表查询和子查询 | 旺旺知识库...
  6. CSS 取消input的上下箭头
  7. EventBus使用总结和使用场景
  8. 高主频,多核心,超线程都代表什么,适用于哪些情况
  9. 分布式的,新一代版本控制系统Mercurial的介绍及简要入门
  10. 2022二级建造师考试《机电工程》易难点历年试题及答案