CSS控制文本长度比用c和fn标签来控制文本长度好用多了,特此记录下。
此处要用到的语法为CSS中的:
1、
text-overflow:clip | ellipsis
clip:不显示省略标记(...),而是简单的裁切;
ellipsis:当对象内文本溢出时显示省略标记(...)
text-overflow:ellipsis
2、
white-space:normal | pre | nowrap| pre-wrap | pre-line | inherit
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值
强制文本在一行内显示(white-space:nowrap)
3、
overflow : visible | auto | hidden | scroll
溢出内容为隐藏(overflow:hidden)
<html>
<head>
<style type="text/css">
.text-hide{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:200px;
}
</style>
</head>
<body>
<div class="text-hide">
Dota官方全称LogoDota是Defense of the Ancients的简称,可以译作守护古树、守护遗迹、远古遗迹守卫, 是指基于魔兽争霸3:冰封王座(由暴雪娱乐公司出品)的多人即时对战自定义地图,可支持10个人同时连线游戏。DotA是目前唯一被暴雪娱乐公司官方认可的魔兽争霸的RPG地图。Allstars系列现更新作者为美国人IceFrog。
截至日前,DotA Allstars官方最新版本为6.74c,AI版本为DOTA6.74c AI简体中文版。
</div>
</body>
</html>
分享到:
相关推荐
代码如下: ... ;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; >a b c d e f g h i j k l ,...还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
CSS(js)限制页面显示的文本字符长度.docx
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
css+js背景自适应文本长度的精美导航条 有滑动效果 偏金属色调 质感强
CSS Code复制内容到剪贴板 .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ whitewhite-space:nowrap;/* 不换行 ...
本文档就是讲解通过控制单元格的宽度,让后通过样式使单元格内的超长文本,超过单元格宽度的文本用省略号的形式代替
是一篇介绍如何使网站字体大小更加合理的文章,他教给我们什么才是字体标准化单位,并不是传统的px,而是em!
css+js实现页面变化,文本框内容自动截取显示,超过一行长度的就用...显示
任意长度文本 方法二:适用js截取 <HTML> <HEAD> <TITLE>JQUERY 文本截取方法</TITLE> ; charset=UTF-8"> <script type="text/javascript" src="jquery-1.3.2.js"></script> $.fn.substr = function...
主要介绍了CSS超出文本指定宽度用省略号代替和文本不换行的相关资料,小编觉的实用性非常,特此分享到脚本之家平台,供大家参考
代码如下: ”cf_nav> <ul> <li> <a> ”nav_block”> 首页</span> ”hover”>首页</span> </div> </a> </li> <li> <a>
可能有的人会用Javascript中的substring对控件显示的文本进行控件,但由于字母大小写,汉字,其它语言等每个字符的大小是不一样的,这导致了同样是substring(0, 10),有的内容小,有的内容大,而想要使用CSS控制控件...
6.2 CSS控制表格的颜色交替 155 6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化 161 7.1.2 增加表单中的空隙 162 7.2 表单元素样式设计 ...
CSS控制DIV.html CSS控制DIV.html DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示...
文本超出范围才显示省略号,否则不显示省略号 省略号位置显示刚好 基于上述的准则,下面我们通过编码实践,给出一些答案。 单行文本溢出省略 核心 CSS 语句 overflow: hidden;(文字长度超出限定宽度,则隐
div+css 字体属性 字体族科 字体风格 字体变形 字体加粗 字体大小 字体 颜色及背景属性 颜色 背景颜色 背景图象 背景重复 背景附件 背景位置 背景 文本属性 文字间隔 字母间隔 文字修饰 纵向排列 ...
font-size:长度|关键字设置文本大小 xx-small:极小 x-small:特小 small:小 medium:中等 large:大 x-large:特大 xx-large:极大 font-style:关键字设置文本斜体性质 normal:正常 italic:斜体 oblique:偏...