首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    文字超出三行省略…显示全文「建议收藏」

    1、在开发过程中,我们经常会用到这种超出三行显示…的要求,使用css属性是可以的,但是需要考虑兼容性问题 实现单行文本的溢出显示省略号,我们应该都知道用text-overflow:ellipsis属性,...来兼容部分浏览器; .textOVerFlow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } 实现三行在此基础上扩展...webkit-line-clamp: 3; -webkit-box-orient: vertical } 因为使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端; 2、此处延伸 ,超出三行显示展示全文...,如果使用以上属性我们可以发现,实际上dom里面的文字没有改变,只是视觉上有…,实现超出三行显示全文,分为两步: (1)、是否满足三行 (2)、是否出现了省略号… 或者说是否超过了三行 那麽对应的解决方案...: (1)行数我们可以通过 使用 line-height*num 与 dom的高度进行比较,但是无法判读是否三行全部占满, (2)因为上面属性是实际文本内容并没有改变,所以说,我们可以获取到实际dom的高度

    2.3K60

    HTML5

    四、HTML5 一、什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的...HTML 语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 2.HTML5 拓展了哪些内容 语义化标签...本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 3.HTML5 的现状 绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性, 总的来说:HTML5...已经是大势所趋 二、HTML5 新增标签 1.什么是语义化 2.新增了那些语义化标签 header --- 头部标签 nav --- 导航标签 article --- 内容标签 section...image.png 3.使用语义化标签的注意 语义化标签主要针对搜索引擎 新标签可以使用一次或者多次 在 IE9 浏览器中,需要把语义化标签都转换为块级元素 语义化标签,在移动端支持比较友好, 另外,HTML5

    3.2K20
    领券