两种利用CSS样式截取标题长度的示例

用CSS样式进行截取标题的长度。

 

第一、用于SPAN或者LI的标题样式

 

 代码如下 复制代码

.text-css {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

 

我们只需要将.text-css样式应用到LI或者SPAN中，上面的样式，老蒋可以根据需要进行修改截取长度。

 

第二、表格TABLE截取样式

 

 代码如下 复制代码

table{
width:30em;
table-layout:fixed;}/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */

td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;}/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

以上是针对表格的时候进行截取的，一般我们用的少。

时间： 2024-10-24 12:19:58

两种利用CSS样式截取标题长度的示例的相关文章

ASP.Net中两种利用CSS实现多界面的方法

asp.net|css 通过使页面动态加载不同CSS实现多界面 方法一: <%@page language="C#"%> <%@import namespace="System.Data"%> <script language="c#" runat="server"> public void page_load(Object obj,EventArgs e) { //创建服务器端控件. //

在ASP.Net中两种利用CSS实现多界面的方法.

asp.net|css 通过使页面动态加载不同CSS实现多界面(类型于csdn的blog): 方法一: <%@page language="C#"%><%@import namespace="System.Data"%><script language="c#" runat="server">public void page_load(Object obj,EventArgs e){ //创

在Dreamweaver中利用CSS样式表设置网页

了解 CSS 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观.使用 CSS 设置页面格式时,内容与表现形式是相互分开的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中.使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等. CSS 使您可以控制许多仅使用 HTML 无法控制的属性.例如,您可以为所选文本指定不同的字

利用css样式控制超链接颜色显示

很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改a的属性,好像所有的链接的颜色都改了. 四中超链接状态分别对应的css属性:a{}.a:hover{} .a:visited{}.a:active{},通常只写a{}.a:hover{}即可,如果你需要其他两种字体颜色设置请参照一下顺序来书写 a{color:red;} a:visited{color:green;} a:hover {color:yellow;background:blue;} a:active {color:lime

在ASP.Net中几种利用CSS实现个性化界面的方法

asp.net|css 看了老猫的文章,通过使页面动态加载不同CSS实现个性化界面(如个性化blog界面) 有以下几种方法 方法一:       HtmlGenericControl 定义不由特定的 .NET Framework 类表示的所有 HTML 服务器控件元素的方法.属性和事件. <LINK href="login.css" type="text/css" rel="stylesheet"> 其中href属性可以从用户配置中动

利用CSS样式表改善网站可访问性

最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配. 像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一. 问

纯CSS实现Tab的两种方案

Tab在当前的Web应用中是非常常见的,最大的好处在于可以充分的利用有限的空间来展示更多的内容.常见的的Tab一般都是通过Javascript来实现,它的好处是灵活和功能强大.但是在某些情况下,如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的.本文主要介绍两种纯CSS的实现方案: 1. 锚点 + :target; 2. 纯锚点; 这两种各有各优点,也有各自的局限性. 具体的Demo请查看这里 方案一: 锚点 + :target CSS3中引入了一个新的伪类:target,当用户和页

css中ul li的背景小图标属性设置的两种情况

ul li的背景小图标属性设置一般会有两种情况:定义在ul里及li里,这两种定义在什么情况下使用,在下文给出详细的介绍,经常div+css布局的朋友不妨参考下,希望对大家有所帮助   这里我们分两种情况列出: ①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在<ul>里.因为很长,所以放在<li>的外边<ul>里 ②当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<l

利用css修改复选框的样式做出如下的样式

问题描述 利用css修改复选框的样式做出如下的样式 解决方案 你这个单css搞不了,要结合js <!doctype html> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script> <style> ul,li{list-style:none;padding:0px;