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

发布时间:2019-07-07  栏目:计算机教程  评论:0 Comments

有人会问,为什么我把text-overflow拿出来单独讲解。以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段。

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

有人会问,为什么我把text-overflow拿出来单独讲解。以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段。
但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻。
 
这篇文章,我讲带领大家做一个《今日头条》新闻导航列表,带领大家领略text-overfow的强大魅力。先看一下效果:
图片 1  
好了,看完了效果,现在正式开始今天的开发旅程吧!  
首先我们先创建html页面,代码如下所示(红色文字即是我们Demo的主要内容):

<!DOCTYPE html> <html> <head>      <meta charset=”utf-8″>         <link rel=”stylesheet” href=”styles.css”>         <title>text-overflow 实例详解</title>     </head>          <body>      <div>          <div class="sidebar">                 <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>

页面创建完后,我们先运行一下,查看一下效果:
图片 2  
根据上面的图片,我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表:

  *{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/ 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页面,查看此时运行效果图:
图片 3  
接下来我们就给列表加上阴影边框,以及阴影效果,同时也给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;  /*设置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页面,查看修改完之后的效果,现在我们的列表边框,列表头的样式都已经好了:
图片 4  
最后,让我们运用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。 接着我们运行一下页面,查看此时的效果:
图片 5  
不对啊,我们已经加了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; }

  我们再运行看一下页面效果:
图片 6  
我们看到上面的例子,现在已经不换行了,但是内容却超出范围依然显示,好,那我们就让它超出范围的就不显示(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页面,看看修改后的效果:
图片 7  
看到上面,心情非常激动,终于得到想要的效果了。
从这几步,我们也大概可以看出,其实text-overflow省略符属性,只是告诉浏览器:如果文本没换行,溢出范围了,如果你隐藏溢出的内容,那我就给你显示省略符。
至此大功告成,哈哈, text-overflowwhite-spaceoverflow 这三个属性,更像一个铁三角啊。
  欢迎大家加入互联网技术交流QQ群:62329335 
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。

但是CSS引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻。

 

http://www.bkjia.com/Javascript/858173.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/858173.htmlTechArticleCSS3新增属性text-overflow(省略符)实战开发详解,css3text-overflow
有人会问,为什么我把 text-overflow
拿出来单独讲解。以前,当一行内容显示不完…

这篇文章,我讲带领大家做一个《今日头条》新闻导航列表,带领大家领略text-overfow的强大魅力。先看一下效果:

图片 8

 

好了,看完了效果,现在正式开始今天的开发旅程吧!

 

首先我们先创建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>

页面创建完后,我们先运行一下,查看一下效果:

图片 9

 

根据上面的图片,我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表:

 
*{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/
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页面,查看此时运行效果图:

图片 10

 

接下来我们就给列表加上阴影边框,以及阴影效果,同时也给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;
 /*设置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页面,查看修改完之后的效果,现在我们的列表边框,列表头的样式都已经好了:

图片 11

 

最后,让我们运用text-overflow来设置省略符样式吧。在样式表中加入如下代码:

留下评论

网站地图xml地图