html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替

　　　　前端实现div框边角的钝化虽然简单，但是有时候突然想不到，特此写下几句实现方法，以便记忆。

　　　　实现div框四个角都钝角的操作：设置 div ： border-radius=10px;

　　　　实现div框一个角的钝角效果 ：设置div :border-top-left-radius=10px;

　　　　　　　　　　　　　　　　　 border-top-right-radius=10px;　　

　　　　　　　　　　　　　　　　　 border-bottom-left-radius=10px;

　　　　　　　　　　　　　　　　　 border-bottom-right-radius=10px;

　　　　html实现限制一行字数的显示，超出的部分用省略号（....）来代替

　　　　　　<div style="width:200px; 　　　　　　　　　　　　　white-space:nowrap;            　　　　　　overflow:hidden;            　　　　　　text-overflow:ellipsis;            　　　　　　border:1px solid red">　　　　 　　　　　　试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看　　　　</div>

　　语法：　　

　　text-overflow : clip | ellipsis　　

　　参数：

　　clip : 　不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）

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

　　说明：　　

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

　　请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

　　示例：

　　div { text-overflow : clip; }

　　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

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

有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，



如何实现CSS限制字数,超出部份显示点点点...


<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>



效果：




语法：


text-overflow : clip | ellipsis


参数：


clip : 　不显示省略标记（...），而是简单的裁切


（clip这个参数是不常用的！）


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


说明：


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


请您注意，text-overflow:ellipsis属性在FF中是没有效果的。


示例：


div { text-overflow : clip; }


text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。


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


有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，


white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->




发布此文章仅为传递网友分享，不代表本站观点，若侵权请联系我们删除，本站将不对此承担任何责任。







旅行，写作，编程








鲜为人知的编程真相








Java 与 .NET 的平台发展之争








我的丈夫是个程序员








2013年中国软件开发者薪资调查报告








科技史上最臭名昭著的13大罪犯








程序员的鄙视链








做程序猿的老婆应该注意的一些事情




HTML/CSS-热门HTML/CSS-最新HTML/CSS-其它





文章评论



相关解决方案

				


				
时间： 2024-08-25 19:55:45 

		


		


	

	
	

		


		
html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替的相关文章


								

		

			

                如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）
			

		

		

									

				写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q			

		

	

				

		

			

                多个div显示同一行并居中显示(代码附带jquery-hover事件)
			

		

		

									

				<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&g			

		

	

				

		

			

                ScrollView嵌套ListView、GridView只显示一行，psts显示不出来
			

		

		

									

				我们经常会用到在ScrollView嵌套ListView.GridView,给layout_height设置wrap或者match的时候,结果只显示一行,而给它设置一个固定的高度虽然能显示出来,但是会显示不全,或者空出一段. 原因:ScrollView在计算高度的时候,如果是wrap或者是match就会出错,结果只显示一行. 解决方案:定义一个类GridView4ScrollView继承GridView,然后重写onMeasure方法 @Override /** * 重写该方法,重新计算Grid			

		

	

				

		

			

                sql查询 ，多行数据合并成一行，并且显示合并后某一列的值拼接结果
			

		

		

									

				select  [value] = stuff((select ','+modmb003  from modmb detail where modmb=18 for xml path('')), 1, 1, '') 其中stuff的作用是:删除指定长度的字符,并在指定的起点处插入另一组字符 语法:STUFF ( character_expression , start , length ,character_expression ) 列:SELECT STUFF('abcdef', 2, 3,			

		

	

				

		

			

                js动态删除某一行，内容超出单元格后超出的部分用省略号代替
			

		

		

									

				<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../lib/jquery.js"></script> <title></title> <style> table{ table-layout:fi			

		

	

				

		

			

                css 一行内显示 超出自动隐藏
			

		

		

									

				一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31em;word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与ov			

		

	

				

		

			

                关于SQL Server将一列的多行内容拼接成一行，合并显示在另外表中
			

		

		

									

				select '['+title_a+','+title_b +']' from A   for xml path('') SELECT *, (select '['+title_a+','+title_b +']' from A where A.t_id=B.t_id   for xml path(''))  FROM B			

		

	

				

		

			

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

		

		

									

				javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o			

		

	

				

		

			

                基于DevExpress开发的GridView如何实现某一列的一行让用户可以从下列列表选择选项
			

		

		

									

				在很多DevExpress的使用例子里面,我们可以看到,基于GridView实现的不同控件展示的时候,每一列的控件类型都是一样的,如果我要某一列的一行让用户可以从下列列表选择选项,而其他行不可选择,那我们可以实现这种效果吗,应该如何实现? 1.GridView实现的显示效果 例如下面的效果就是我希望达到的,在第一行的流程处理人列允许用户选择,其他行禁止用户选择. 单用户单击第一行的“流程处理人”列的时候,弹出一个列表供用户选择,选择后显示具体的人员的姓名即可. 2.功能实现具体步骤 实现上面所说