`
陌上花会开
  • 浏览: 39470 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3新增属性text-overflow(省略符)实战开发详解

    博客分类:
  • css3
阅读更多
有人会问,为什么我把text-overflow拿出来单独讲解。以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段。
但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻。
 
这篇文章,我讲带领大家做一个《今日头条》新闻导航列表,带领大家领略text-overfow的强大魅力。先看一下效果:
clipboard
 
好了,看完了效果,现在正式开始今天的开发旅程吧!
 
首先我们先创建html页面,代码如下所示(红色文字即是我们Demo的主要内容):
<!DOCTYPE html>
<html>
<head>
     <meta charset=”utf-8″>
        <link rel=”stylesheet” href=”styles.css”>
        <title>text-overflow 实例详解</title>
    </head>
    
    <body>
     <div>
         <div>
                <dl>
                 <dt>今日头条</dt>
                        <dd>
                          <ul>
                                 <li><a href=”http://www.itdriver.cn”>迅雷浴血IPO员工心寒:空降高管摘桃</a></li>
                                 <li><a href=”http://www.itdriver.cn”>小米4前面板谍照曝光 采用超窄边框设计</a></li>
                                 <li><a href=”http://www.itdriver.cn”>在线旅游市场风云变 携程将入股艺龙?</a></li>
                                 <li><a href=”http://www.itdriver.cn”>人网副总裁杜悦离职 炮轰陈一舟为人负面</a></li>
                             </ul>
                       </dd>
                </dl>
            </div>
        </div>
    </body>
</html>
页面创建完后,我们先运行一下,查看一下效果:
clipboard02
 
根据上面的图片,我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表:
 
*{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/
padding:0px;
margin:0px;
color:#000;
}
a:link{ /*设置超链接未访问时样式*/
text-decoration:none;
}
a:hover{ /*鼠标滑过超链接时显示的样式*/
color:#F30;
text-decoration:underline;
}
.sidebar{ /*将边栏设置成固定宽度*/
margin:10px auto;
width:200px;
}
.sidebar ul{ /*清除ul默认样式*/
list-style-type:none;
}
 
运行html页面,查看此时运行效果图:
clipboard03
 
接下来我们就给列表加上阴影边框,以及阴影效果,同时也给title加上背景颜色,代码如下所示(红色字体部分):
 
 
*{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/
padding:0px;
margin:0px;
color:#000;
}
a:link{ /*设置超链接未访问时样式*/
text-decoration:none;
}
a:hover{ /*鼠标滑过超链接时显示的样式*/
color:#F30;
text-decoration:underline;
}
.sidebar{ /*将边栏设置成固定宽度*/
margin:10px auto;
width:200px;
}
.sidebar ul{ /*清除ul默认样式*/
list-style-type:none;
}
.sidebar dl{ /*设置列表的边框,并设置列表的圆角,以及阴影效果*/
border: 1px solid #80C8FE;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
box-shadow:6px 6px 6px #666;
}
.sidebar dt{/* 设置title样式 */
height:2em; /*设置title高度以及行高,使文字垂直居中 */
line-height:2em;
padding-left:4px;
background-color:#80C8FE; /*设置title行的背景颜色*/
color:#FFF; /*设置文字颜色*/
font-weight:bold; /*调整文字加粗显示*/
-webkit-border-top-left-radius:8px; /*设置title行的左上和右上圆角效果*/
-moz-border-top-left-radius:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-top-right-radius:8px;
border-top-right-radius:8px;
}
 
运行一下html页面,查看修改完之后的效果,现在我们的列表边框,列表头的样式都已经好了:
clipboard04
 
最后,让我们运用text-overflow来设置省略符样式吧。在样式表中加入如下代码:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
 
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
}
 
在li里我们加上了属性 text-overflow:ellipsis。 接着我们运行一下页面,查看此时的效果:
clipboard05
 
不对啊,我们已经加了text-overflow:ellipsis属性了,怎么还没有省略符号呢。 其实顾名思义,这个属性代表的是文本超出限度之后,添加省略符号。但是,我们看运行的效果,页面文字自动换行了。
 
现在我们不让它换行,加上white-space:nowrap。代码如下所示:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
 
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
white-space:nowrap;
}
 
我们再运行看一下页面效果:
clipboard06
 
我们看到上面的例子,现在已经不换行了,但是内容却超出范围依然显示,好,那我们就让它超出范围的就不显示(text-overflow:hidden;)。修改代码如下:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
 
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
 
我们现在再运行一下html页面,看看修改后的效果:
clipboard07
 
看到上面,心情非常激动,终于得到想要的效果了。
从这几步,我们也大概可以看出,其实text-overflow省略符属性,只是告诉浏览器:如果文本没换行,溢出范围了,如果你隐藏溢出的内容,那我就给你显示省略符。
至此大功告成,哈哈, text-overflowwhite-spaceoverflow 这三个属性,更像一个铁三角啊。
 
欢迎大家加入互联网技术交流群:62329335

 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
0
2
分享到:
评论

相关推荐

    css中text-overflow属性与文本截断详解

    `text-overflow`属性在CSS Basic User Interface Module Level 3中定义,标准值包括`clip`和`ellipsis`。`clip`会简单地剪切超出容器范围的文本,而`ellipsis`则会在文本末尾显示省略号(...)来表明内容被截断。 ...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).docx

    当你希望隐藏超出容器宽度的文本时,可以使用`overflow`属性配合`text-overflow`属性。`overflow`设置为`hidden`会让超出部分不可见,而`text-overflow`则定义了如何处理这些被剪裁的文本。例如: ```css div....

    用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf

    通用的CSS截断字符串的方法是利用`text-overflow`属性,结合`overflow`和`white-space`。如下所示: ```css div.test { width: 200px; height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    CSS3属性.docx

    【CSS3属性详解】 CSS3(Cascading Style Sheets Level 3)是CSS规范的第三版,它引入了许多新特性,极大地丰富了网页设计。以下是一些关键的CSS3属性的详细说明: 1. **border-radius**: 这个属性允许你创建圆角...

    css3新属性.pdf

    《CSS3新特性详解》 CSS3作为CSS的最新版本,带来了许多革命性的新特性,极大地丰富了网页设计的可能性。虽然CSS3尚未正式发布,但其细致入微的改进已经得到了广泛的应用和支持。本文将详细介绍其中的一些关键特性...

    用css使单行超出指定宽度的内容切去并在结尾出现省略号

    【知识点详解】 在网页设计中,有时候我们希望文本在单行内显示,如果内容超过指定宽度,就需要自动截断并在结尾处添加省略号。这是一个常见的需求,主要应用于标题、摘要或者列表项的展示。在CSS中,我们可以利用...

    JSP中的点点样式

    CSS3提供了`text-overflow: clip`和`text-overflow: ellipsis`两个值,但默认情况下,`text-overflow`只对单行文本有效。对于多行文本的截断,可以使用`display: -webkit-box`结合`-webkit-line-clamp`和`-webkit-...

    用css截取字符的几种方法详解(css排版隐藏溢出文本)

    这种方法不依赖于`text-overflow`属性,但需要额外的CSS样式和布局控制。 5. 针对不同的浏览器,还有特定的私有前缀,如`-webkit-`、`-ms-`、`-moz-`和`-o-`。例如,在IE浏览器中使用`-ms-text-overflow: ellipsis;...

    让超出DIV宽度范围的文字自动显示省略号...

    为了解决这个问题,可以使用CSS中的`text-overflow`属性来实现当文本超出容器宽度时自动显示省略号(`...`),从而达到良好的视觉效果。 #### CSS 属性详解 ##### text-overflow: ellipsis; `text-overflow`属性...

    CSS3常用方法

    ### CSS3常用方法详解 #### 一、选择器与路径优化 - **Class选择器**:在多数情况下,推荐使用`class`选择器而非`id`选择器,以提高代码的复用性。同时,避免选择器路径过长,通常不超过3个层次,这样可以减少选择...

    单/多行文本添加省略号方法详解

    关键的CSS属性包括`overflow`, `text-overflow`和`white-space`。 1. `overflow`属性用于控制元素内容的溢出行为。在这里,我们将它设置为`hidden`,这样超出容器宽度的内容会被隐藏,不会显示出来。 2. `text-...

    GridView固定表头(不用javascript只用CSS!,很好用

    ### GridView固定表头纯CSS实现方法详解 在Web开发中,尤其是在处理大量数据展示时,GridView作为常用的控件之一,其功能强大且易于使用。然而,当数据量较大时,用户在滚动页面查看数据的过程中,可能会失去对列头...

    3.5CSS 内容总结(五)高级技巧.md

    ### CSS 高级技巧知识点详解 #### 1. 精灵图(Sprites) ##### 定义与原理 精灵图是一种提高网站性能的技术,通过将多个小图像合并成一个单一的大图像来减少HTTP请求的数量。这有助于提升网页加载速度及整体性能...

    span标签超长部分隐藏

    通过以上分析,我们理解了如何利用CSS中的`text-overflow`、`white-space`和`overflow`属性来优雅地处理文本溢出问题,尤其是针对`span`元素。这种技术不仅提升了网页的可读性和美观度,还增强了整体的用户体验。...

    CSS3.0帮助文档

    2. **文本溢出**:`text-overflow`控制文本超出容器时的显示方式,如省略号。 3. **自定义字体**:`@font-face`规则支持引入自定义字体,使得设计师可以使用更个性化的字体。 4. **文本修饰**:`text-decoration`...

    CSS基础标签.md

    ### CSS基础标签与属性详解 #### 元素的两种居中方式 在CSS中实现元素居中有多种方法,本文档将介绍两种常见的居中技术: 1. **水平居中**: - **对于块级元素**:可以通过设置 `margin: 0 auto;` 实现。该方法...

    CSS3盒子模型详解

    此外,CSS3中提供了text-overflow属性,当文字超出了设置的宽度时,可以用来定义文字如何显示。例如,text-overflow: ellipsis; 会在文字超出的地方显示省略号,这对于创建整洁的界面非常有用。 box-sizing属性是...

Global site tag (gtag.js) - Google Analytics