text-overflow:ellipsis文本溢出显示省略号,一般的搭配用法如下:

div{
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
}

而想要在一定宽度内显示省略号,必须还有一个固定的宽度,否则元素宽度会扩展至父级元素的宽度。但前不久碰到一个问题,希望实现如下布局:

希望左边的图片宽度固定,右边宽度自适应,内容部分溢出显示省略号。于是出现了难题:宽度需要自适应,但自适应就无法显示省略号。首先,我们简单看一下不考虑这个困难,我们一般会怎么写:

<div id="wrap">
<img alt="" id="left" src="img1.jpg">
<div id="right">
<p class="name">昵称</p>
<p class="content">内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号</p>
</div>
</div>
#wrap {
display: flex;
border: 1px solid black; }
#left {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
}
#right {
flex: 1;
background: yellow;
}
.content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: red;
}

这时候表现如下:

(设置了背景色,以便更好的区分元素)

显然,由于.content设置了white-space: nowrap;,因此内容就将父元素#right撑开,溢出了#wrap。停一下,想一想既然溢出是因为#right被撑开了,那给#right(即.content的父元素)设置overflow:hidden就可以防止.content将#right撑开,应该就能达到效果。试一下,果然达到了预期效果:

在网上查了一下,还可以给#right设置width:0(或者一个较小的宽度),也可以达到同样是效果。

flex自适应宽度显示省略号的更多相关文章

  1. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  2. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  3. td 中设置超出宽度显示省略号失效

    td测试内容超出显示省略号时,结果没有显示省略号,而是一直往后显示,且超出了td大小,强行挤大了table. 原因是因为td默认不换行. 解决方法: 1.强制td换行. IE加上word-break: ...

  4. 【转载】flex布局超过显示省略号

    <div class="main"> <div class="content"> <h4 class="name&quo ...

  5. flutter实现文字超出最大宽度显示省略号

    Container( width: 60, child: Text( '...', maxLines: 1, overflow: TextOverflow.ellipsis, ), ) 给Text外层 ...

  6. 怎么设置table(表格)手机端自适应宽度

    我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...

  7. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  8. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  9. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

随机推荐

  1. ubuntu 16.04 安装Tensorflow

    ubuntu 16.04 安装Tensorflow(CPU) 安装python ubuntu 16.04自带python2.7,因此可以略过这一步 安装pip sudo apt-get install ...

  2. SnapKit 类图

     如图上图所示,居于中心的是ConstraintDescription,它用来生成Constraint,最后再转换成系统的NSLayoutConstraint. ConstraintDescript ...

  3. 利用 URLProtocol 假冒一个服务器来测试网络

    制造一个假的服务器 class MockURLProtocol: URLProtocol { static var requestHandler: ((URLRequest) throws -> ...

  4. method swizzing

    原理 类的方法类别中,选择子的名称通过映射表找到应该调用的方法.如下所示:  OC 的运行时提供了几个方法可以操作这张表.可以向其中新增选择子,改变选择子的实现,或者交换选择子映射到的指针.  在 ...

  5. 【学习笔记】linux bash script

    1. sed sed 是一种流编辑器,它是文本处理中非常常用的工具,能够完美的配合正则表达式使用,功能非常强大. mkdir playground touch test.txt echo " ...

  6. python中如何打印某月日历

    Calendar模块有很广泛的方法用来处理年历和月历,例如打印某月的月历: import calendar cal = calendar.month(2017, 10) print ("以下 ...

  7. C# 对象哈希码

    FCL的设计者认为,如果能将任何对象的任何实例放到哈希集合中,能带来很多好处.但是这里说一点,还是会存在,哈希码类似的情况,这一点大型网站架构这本书中有介绍,最好做下MD5算法.为此,System.O ...

  8. python while嵌套循环

    while循环1.输出打印以#组成的长方形,自己定义长和宽.# -*-encoding:utf-8-*-'''This is script for start docker containor!Aut ...

  9. [codeup] 2046 八皇后

    题目描述 会下国际象棋的人都很清楚:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8 * 8个方格),使它们谁也不能被吃掉!这就是著名的八皇后问题. 对于某个满足要求的8 ...

  10. 【转】CSS3的calc()使用——精缩版

    问题:在制作页面的时候,总会碰到有的元素是100%的宽度.如果元素宽度是100%时,只要在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模 ...