css控制标题长度超出部分显示省略号

时间:2022-09-21 13:42:05

width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis;

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

对应的脚本特性为text-Overflow。

---------------------------------------------------------------------------------

语法:   text-overflow : clip | ellipsis  

参数:   

clip : 不显示省略标记(...),而是简单的裁切   

ellipsis : 当对象内文本溢出时显示省略标记(...)   

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。   

--------------------------------------------------------------------------------

语法: 

overflow : visible | auto | hidden | scroll 

取值: 

visible :  默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 

auto :  在必需时对象内容才会被裁切或显示滚动条 

hidden :  不显示超过对象尺寸的内容 

scroll :  总是显示滚动条

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。   

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果   

三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果:

css控制标题长度超出部分显示省略号的更多相关文章

  1. CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  2. destoon控制标题长度&comma;title中显示全标题 标题字符长度怎么控制?

    如题商品调用出来后,标题的字符长度怎么控制?有哪位高手能帮我解决吗? 小弟在此感谢了. &length=30 //30表示30个字节 <!--{tag("moduleid=5& ...

  3. css文本强制两行超出就显示省略号&comma;不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  4. css控制文字长度,超出长度显示&period;&period;&period;

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  5. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

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

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

  7. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  8. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  9. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

随机推荐

  1. Rectangle Area

    class Solution { public: int computeArea(int A, int B, int C, int D, int E, int F, int G, int H) { l ...

  2. Ubuntu之Mysql安装及基本设置

    No1. Mysql 安装 sudo apt-get install mysql-server mysql-client 记得root密码别忘了. No2. 验证Mysql安装 sudo servic ...

  3. React Native 开发笔记

    ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...

  4. poj 1730 Perfect Pth Powers

    这个有2种方法. 一种是通过枚举p的值(p的范围是从1-32),这样不会超时,再就是注意下精度用1e-8就可以了,还有要注意负数的处理…… #include<iostream> #incl ...

  5. Android Google Map v2具体解释&colon;开发环境配置

    Android Google Map v2具体解释:开发环境配置                                       --转载请注明出处:coder-pig 说在前面: 说到地 ...

  6. PhiloGL学习(6)——深情奉献:快乐的一家

     前言 话说上一篇文章结尾讲到这一篇要做一个地球自转以及月球公转的三维动画,提笔,不对,是提键盘开始写的时候脑海中突然出现了几年前春晚风靡的那首歌:蒙古族小丫头唱的快乐的一家.闲言莫提,进入正题.   ...

  7. css实现礼券效果3

    <view class="coupon"> <view class="coupon-left"> </view> <v ...

  8. shell脚本实例-安装httpd,安装yum源

    1.安装httpd #!/usr/bin/bash getway=192.168.1.1 ping -c1 www.baidu.com &>/dev/null if [ $? -eq 0 ...

  9. Android中fragment之间和Activity的传值、切换

    功能介绍:通过一个activity下方的三个按钮,分别是发送消息(sendButton).聊天记录(chatButton).常用语(commonButton).当单击按钮是,来切换上方的fragmen ...

  10. beta 圆桌 3

    2018-12-16图片缺失,当日数据: 总工作量:24 已完成:5 剩余:19 031602111 傅海涛 1.今天进展 实时字幕的实现大概 2.存在问题 实时字幕存在不稳定和耗费资源 3.明天安排 ...