css控制一行文字超过固定长度显示省略号

最新推荐文章于 2021-06-03 23:46:05 发布

一丢丢的幸福

最新推荐文章于 2021-06-03 23:46:05 发布

阅读量2.2k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/dly120219891208/article/details/38679221

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

width:336px;overflow: hidden;white-space:nowrap;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;

这段css加上后发现ie8下不兼容，解决办法

ie8下不显示省略号，在页面上加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就ok了

优惠劵

一丢丢的幸福

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css控制一行文字超过固定长度显示省略号

这段css加上后发现ie8下不兼容，
复制链接

扫一扫

专栏目录

CSS控制文本的长度超过一行显示省略号的实现方法

09-24

下面小编就为大家带来一篇CSS控制文本的长度超过一行显示省略号的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考

CSS控制文字只显示一行，超出部分显示省略号

younger_z的专栏

09-01

921

之前使用过这个例子，现在总结说明一下：先给贴代码： 01 p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 02 省略我吧！ 03 省略我吧！

参与评论您还未登录，请先登录后发表或查看评论

html+css 实现文本固定长度，超出显示省略号

foolman_pc的博客

05-23

7148

——html代码 div id="d1">div> ——css代码 #d1{ width:300px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /*兼容性*/ -webkit-text-overflow:ellipsis; } 注：关键是给容器指定宽度，并且利用wh

用CSS来控制字符长度和显示长度

tzbo0811的专栏

04-09

909

<br />在网页排版设计中，会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS的代码控制来实现文本截取的方法，与程序员的直接字符截取的方式有些区别，其优势是可以自动控制文本显示的长度；缺点是不同浏览器的兼容性并不完美。<br />使用overflow，text-overflow，white-space这三个主要的属性，其他的代码属于修饰作用。<br />CSS代码：<style> .texthidden{ width:20

css实现超出固定长度的部分以省略号显示

小瑾沐晚风的博客

12-29

4094

1.一行中超出固定长度的部分以省略号显示 #div1{ width: 100px; overflow: hidden; /*内容会被修剪，并且其余内容是不可见的*/ text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本。*/ white-space: nowrap; /*文本不换行*/ } 2.多行中...

css实现每行显示固定字符长度（变态需求）

weixin_33720956的博客

05-15

2942

实现方案使用宋体字体优势：1.字母符号等宽； 2.汉子宽度为其他一个字符的两倍符合我们的要求；3.字体宽度正好为font-size的一半百度下载宋体ttc格式； www.fontke.com/tool/fontfa… 转换其他格式为什么font-face要同时设置ttf eof woff woff2 svg这么多格式; IE浏览器：EOT Mozilla浏览器：OTF，TTF...

强制文本在一行内显示,并且后面有省略号效果的实现方法

09-24

下面小编就为大家带来一篇强制文本在一行内显示,并且后面有省略号效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

01-21

1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有...

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

11-27

在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照...

css 控制字符显示长度

Nicole_Weijie的博客

04-26

2194

CSS代码： <style> .hiddentext{ width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #ddd;} </style>HTML代码： <div class...

css限制显示字数，文字长度超出部分用省略号表示

热门推荐

OrangeJuiceMe

03-09

8万+

为了保证页面的美观整洁，在文字太多的时候，我们常需要隐藏超出长度的文字。在题目，名称，列表条目等地方常用到。 (1).html中文字超出一行，省略超出部分，显示'...' 如果这种情况比较多，可以取一个切合作用的类名用于复用。 .line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: now

css样式：固定？行显示超出显示...以及单行文本溢出隐藏设置

qq_36344795的博客

10-08

797

固定文本两行显示的css样式设置： text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; （需要最多显示几行就在-webkit-line-clamp: 设置几;*用阿拉伯数字）文本在一行内超长显示css样式设置：固定文本的长度、高...

css实现固定行显示，剩余用省略号代替

yangyi

07-01

157

css实现固定行显示，剩余用省略号代替 .box{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; //数字表示几行显示 -webkit-box-orient: vertical; }

css控制超出一行内容显示省略号

怪力马猴烧酒的博客

08-11

1万+

前言：在前端开发过程中，经常会遇到文字超过一行内容的情况，要求隐藏超出部分并且以省略号显示。解决方法：使用以下css代码即可解决这个需求： white-space:nowrap;/*规定段落中的文本不进行换行*/ overflow:hidden;/*内容会被修剪，并且其余内容是不可见的。*/ text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/ ...

css一行内超出文字出现省略号

哈哈哈蜗牛的博客家

02-28

7227

css一行内超出文字出现省略号 文字超出一行的出现省略号 //html <p style="width:50px;" class="ellipsis">哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈</p> //如果超出p标签的元素就出现省略号 .ellipsis { overfl...

使用CSS，控制元素中文字显示的长度，若超过，将用省略号代替

FTR839691352的博客

12-27

238

max-width: 50px;/必须设置宽度/ overflow: hidden; /溢出隐藏/ text-overflow: ellipsis; /以省略号…显示/ white-space: nowrap; /强制不换行/

html 文字中不换行怎么写,css如何控制文字不换行？

weixin_39773239的博客

06-03

520

在css中，可以使用white-space属性来控制文字不换行；通常我们使用white-space:nowrap来强制文本文字内容不换行，文本会在在同一行上显示，直到遇到标签为止。下面我们通过示例来看看如何使用white-space属性来控制文字不换行。p {width: 400px;height: 50px;border: 1px solid red;}.nowrap{white-space...

CSS 省略号（单行省略号、多行省略号）

Ares5k

04-09

7万+

单行超出省略号代替、多行超出省略号代替

css字体保持在一行不换行的实现方法

dawuyou的博客

12-16

1331

css字体保持在一行不换行的实现方法：1、通过“word-break:keep-all;white-space:nowrap;”属性实现文字不换行；2、在表格中通过设置“word-break”属性设置文字不换行。本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。推荐：《css视频教程》 css设置字体在同一行的方法：一般的文字不换行(适用于内联与块)： 1 2 3 4 5 6 7 8 9 .text-overflow { display:block;...

css样式超出固定长度省略显示

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交