• CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法


    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

      平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。

      这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。

      特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法。

      总之要想让内容不超出对象设置宽度高度限定,那就使用overflow:hidden隐藏超出多余部分即可

     

    一、 我们可以使用CSS overflow样式解决

      对应样式overflow:hidden

      Div{overflow:hidden}

    这样设置后,假如DIV对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

    二、超出部分用省略号显示

      1、对象设置text-overflow:ellipsis;省略号样式

      2、使用nobr标签,强制让内容不换行(css换行、css不换行)。

      div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;   }

    NOte:

      text-overflow语法:
      text-overflow : clip | ellipsis

      text-overflow参数值和解释:
      clip :  不显示省略标记(...),而是简单的裁切
      ellipsis :  当对象内文本溢出时显示省略标记(...)

      text-overflow应用说明:
         CSS text-overflow设置或检索是否使用一个省略号标记(...)标示对象内文本文字的溢出。

      要想实现显示不完内容将显示省略号代替,还需要html nobr标签完成(nobr禁止换行标签)

      white-space

        属性设置如何处理元素内的空白。

    这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的
    默认值: normal
    继承性: yes
    版本: CSS1

    JavaScript 语法: object.style.whiteSpace="pre"
    实例
    规定段落中的文本不进行换行:
    p{
    white-space: nowrap
    }

    浏览器支持
      所有浏览器都支持 white-space 属性。
    注:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
    可能的值
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。
  • 相关阅读:
    webpack
    一 java包管理
    docker 保存本地容器 推送镜像
    virtualBox 安装linux系统 网络设置小记
    centos6.5编译安装nginx[整理二]
    go基本使用
    docker基础命令使用
    centos 安装docker
    docker 删除容器及镜像
    PHP Thread Safe和Non ThreadSafe
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5265461.html
Copyright © 2020-2023  润新知