效果如图1-1。

效果图1-1

css代码：

white-space:

nowrap;overflow: hidden;

text-overflow: ellipsis;

display: inline-block;

css超出盒子隐藏的更多相关文章

  1. 移动端纯css超出盒子出现横向滚动条

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  3. CSS 超出隐藏问题

    .dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...

  4. css超出多行隐藏

      单行隐藏: overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段 ...

  5. css 文字超出部分隐藏

    未做隐藏处理 执行结果: 1.1行超出部分省略号 效果: 2.多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容) 效果: -webkit-line-clamp 属性定义显示行数可 ...

  6. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  7. Css float 盒子模型 position

    属性: float 浮动 浮动的内容用div包起来,给div设置宽高 clear 清除浮动. box-sizing 标准模式下的盒模型 content-box:(默认属性) padding和borde ...

  8. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  9. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

随机推荐

  1. chrome浏览器 新打开的页面覆盖当前页面

    chrome浏览器  本应该新打开一个页面,却覆盖了当前页面. 解决办法:使用鼠标中键打开一次,后续即可正常使用.

  2. C++学习笔记----3.2 C++引用在本质上是什么，它和指针到底有什么区别

    从概念上讲.指针从本质上讲就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 而引用是一个别名,它在逻辑上不是独立的,它的存在具有 ...

  3. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  4. sqlserver 取月初月末的时间

    1.取月初的时间   --getdate() :2012/05/08  19:29:00 select convert(varchar,dateadd(day,-day(getdate())+1,ge ...

  5. Nginx - 01 - Nginx初体验

    首先下载Nginx,这里电脑太垃圾,没法装虚拟机,所以只能用Windons版本的Nginx. 安装包下载地址:http://nginx.org/en/download.html 下载下来,然后解压: ...

  6. Java版阿里云通信短信发送API接口实例（新）

    阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...

  7. docker出现如下错误：Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

    在docker中配置deepo时出现了错误: 在出现这个错误之前,我是先用如下命令查看NVIDIA-docker是否安装成功. docker run --runtime=nvidia --rm nvi ...

  8. 替换^M字符

    关于回车与换行 很久以前,老式的电传打字机使用两个字符来另起新行.一个字符把滑动架移回首位 (称为回车,ASCII码为0D),另一个字符把纸上移一行 (称为换行,ASCII码为0A).当计算机问世以后 ...

  9. jq获取浏览器可视窗口的高度

    <script> var window_height = $(window).height(); </script>

  10. 2019-3-21-win10-uwp-修改图片质量压缩图片

    title author date CreateTime categories win10 uwp 修改图片质量压缩图片 lindexi 2019-03-21 15:29:20 +0800 2019- ...