学做网站培训课程介绍

当前位置:

HTML+CSS控制文字超出部分省略号

我们在做网站时,往往由于某个区块的宽度有限,我们的文字过多就会超过这个宽度。浏览器默认情况下是进行换行显示,但这会导航网站版面错乱,这在门户网站制作中经常遇到。

CSS控制文字超出部分省略号分为二种情况:

情况一:CSS控制多行文字超出部分省略号

一个DIV里有多行文字,需要在文字末尾超出部分变为省略号。方法见:CSS控制多行文字超出隐藏加省略号

dh

情况二:CSS控制单行文字超出部分省略号

常见的控制单行文字超出部分省略号,就是在LI标签上。效果如下图:

HTML+CSS文字超出部分省略号

实现HTML+CSS单行文字超出部分显示省略号的方法很简单,只需要给LI标签添加以下的CSS样式即可。(代码中的div-name换成自己的DIV名)


.div-name li{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 学习了一些HTML知识,我们就可以自己动手去写一些HTML代码了。那么用什么写了,这就要用HTML 编辑器。常用的HTML 编辑器有二种就是记事本和Dreamweave
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下如何使用一个CSS样式来控制多个DIV。在网页制作过程中,写CSS追求代码简洁,如果多个
  • HTML文字倾斜标签是什么 (133594 次浏览)
    HTML文字倾斜标签是什么?我们在做网站时,有的文字需要倾斜显示,这时就需要使用HTML文字倾斜标签了。HTML斜体标签:HTML 斜体标签元素知识与
  • 在前面的建站教程中,我们介绍了HTML+CSS控制文字超出部分省略号,如果一行文字的数量超过一定的宽度就会隐藏并显示省略号。今天我们要介绍的功能是CS
  • 我们在做网站时,往往由于某个区块的宽度有限,我们的文字过多就会超过这个宽度。浏览器默认情况下是进行换行显示,但这会导航网站版面错乱,这在门户
  • 在之前的文章中,讲解了如何在自己做网站的网页中通过JS或者IFRAME调用其它网页的方法,但是有的学做网站论坛学员提出一个问题,通过这种方法是调用了