学做网站培训课程介绍

当前位置:

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;
}

发表评论

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

相关教程

  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设
  • 常用的HTML标签有哪些 (132528 次浏览)
    什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • CSS如何调整DIV顶部边距 图文教程 (126323 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS控制文字水平居中、垂直居中。CSS控制文字水平居中,需要使用text-align属性,其
  • CSS控制DIV外边距 内边距 视频教程 (112978 次浏览)
    欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS控制DIV外边距 内边距。做网站时,可以通过CSS来设置一个DIV与其它DIV之间的边距,
  • 在制作网页中我们时常会将一些文字、图片等做成超链接,但如果在制作时,某些链接页面还没有做好,这时我们就可以用的空链接,提醒自己哪些地方需要添
  • DW中插入文字是最简单的操作,我们可以像在word一样随意的打出自己想要的文字。打开DW后,点击“设计”模式,在文字框中就可以打字了。插入文字可以是
  • 在前面的建站教程中,我们介绍了HTML+CSS控制文字超出部分省略号,如果一行文字的数量超过一定的宽度就会隐藏并显示省略号。今天我们要介绍的功能是CS
  • 我们在做网站时,往往由于某个区块的宽度有限,我们的文字过多就会超过这个宽度。浏览器默认情况下是进行换行显示,但这会导航网站版面错乱,这在门户
  • 在之前的文章中,讲解了如何在自己做网站的网页中通过JS或者IFRAME调用其它网页的方法,但是有的学做网站论坛学员提出一个问题,通过这种方法是调用了