CSS 溢出部分以省略号显示

html 如下：

<div class="box">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

css 代码如下：

.box{ width:50px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

网上有人说兼容IE7 需要加上 <meta http-equiv="x-ua-compatible" content="ie=7" /> 这句话，经我测试不加也可以，

测试结果如下

最后还有个问题，就是出现的省略号，Chrome、FF、360都偏上，IE内核的都能正常显示，不太明白，如果有朋友知道，还望告知

时间： 2024-10-27 00:35:54

CSS 溢出部分以省略号显示的相关文章

css 文字超出用省略号显示

在一行文字超出用省略号显示我们经常会使用如下方法 display:block; width:100px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 但要求两行及以上时,我们需要换另一种方法,代码如下 display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 此时要求父级的宽度是确定的,如

【转】如何用css限制文字长度,使溢出的内容用省略号…显示

文章转自这里http://blog.0755hqr.com/post-597.html ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐由于文字内容长度的不确定,而网页的布局精确性,如果文字内容超出限定的区域(div,span等),会使页面变形.为了满足页面的布局合理,用css样式自动限制文字长度,使溢出内容用省略号…显示. 限制文字长的css样式如下: .text_overflow{ width:320px;

css 溢出文本显示省略号

这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示.通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符,但是通过控制字数来截取的话还是存在一个大问题的,因为中文和英文的字符宽度问题,这个字数不好控制,而且通用性较差.那么有没有更好的方法呢,比如直接用 CSS来解决的,当然是有的. text-overflow是一个

css 文本单行显示溢出时出现省略号多行显示溢出时出现省略号首行缩进

一.文本单行显示溢出时出现省略号二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符原文地址:https://www.cnblogs.com/baobao0205/p/11620418.html

文本溢出用省略号显示

文本溢出,分为单行文本溢出以及多行文本溢出, 单行文本溢出css代码如下: 1 p{ 2 overflow: hidden;//超出部分隐藏: 3 white-space: nowrap;//强制不换行: 4 text-overflow:ellipsis;//超出部分用省略号显示: 5 } 多行文本溢出css代码如下: 1 div{ 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; 5 -webkit-l

单行文本和多行文本溢出以省略号显示方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .inaline{ overflow: hidden; white-space:nowrap; //单行显示溢出以省略号显示方法 text-overflow: ellip

CSS控制长文本内容显示(截取的地方用省略号代替)

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替.虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:代码一:用于非表格LI或span等都可以 www.169it.com .text-overflow { display:block;/*内

CSS截取字符串，多余文字用省略号显示

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个"我的名字好长呀,你该怎么办呢",那老衲不就蛋疼菊花紧了~~ 幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家很简单,大屁不多放,直接开菊花: css里面如下设置: a.name{ line-height: 30px; text-align: center; text-overflow:ellipsis;//让超

CSS控制显示超出部分，用省略号显示

常用,但是常忘,我又不是写css的,所以记下来: 先设置一下限制的宽度, display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; CSS控制显示超出部分,用省略号显示