css实现超出div长度文字自动隐藏或用省略号表示
在网页设计中，一些区域的标题文字是不能换行的，例如首页显示的文章标题，因为布局是固定的，换行会打乱布局，从而使网页产生错位。因此，我们需要一行一段文字，超出行宽的文字用省略号表示或者直接去掉不用省略号代替。看看下图中的实例。
超出div长度用省略号表示
上图显示，扩展阅读的文章标题，超出行宽用省略号表示。本文我们就来看看如何用css来实现的。
css实现超出div长度用省略号表示
源代码其实不复杂，写法如下：
<div title="双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法">双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法</div>
<div title="双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法">双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法</div>
新窗显示代码复制代码不过你不能照搬上述代码到你的网页里，要弄清楚div样式里的几个属性。
overflow: hidden
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。hidden 表示内容会被修剪，并且剪掉的内容是不可见的。
white-space: nowrap
规定文本不进行换行。white-space 属性设置如何处理元素内的空白。nowrap 表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
text-overflow: ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis 表示显示省略符号来代表被修剪的文本。
width:100px
width 属性设置div的长度。
明白了以上解释，你就可以灵活运用上述代码了。
css实现超出div长度的文字自动隐藏
其实有很多人是不喜欢用省略号表示超过div长度的内容的，而是直接不显示就行了。这个同样可以用css来实现，而源代码还是跟上述源代码类似，只是要更改一下text-overflow的属性值。
源代码如下：
<div title="双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法">双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法</div>
<div title="双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法">双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法</div>
新窗显示代码复制代码源代码中，text-overflow的属性值是clip，而不是ellipsis。clip 表示修剪文本的意思。
text-overflow属性ellipsis和clip
overflow实现用滚动条查看其余文字
我们在浏览网页时有时会看到这样一种情况，就是区域长度固定而内容只用一行显示，但不是剪掉而是可以通过滚动条滚动来查看其余内容。如下图所示：
用滚动条查看其余文字
这是怎么实现的呢？其实还是使用了overflow的属性，只不过此属性不是hidden而是scroll了。代码如下：
<div title="双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法">双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法</div>
<div title="双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法">双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法</div>
新窗显示代码复制代码注意，这里代码的text-overflow用clip而不是用ellipsis，否则在可见区域会显示省略号。
相关推荐
-
墨迹天气怎么设置在桌面上显示怎样添加天
温馨提示等内容主体更简洁的展示在新平台上，带给您第一时间的天气资讯 显示更多 屏幕截图 其他信息 发布者 墨迹风云北京软件科技发展有限公司 更多 发布者 墨迹风云北京软。手机桌面显示墨迹天气小工具教程介绍 方法步骤 1下载最新版手机墨迹 3点击工具进入皮肤的设置选项 4我们可以看到这里有一个皮肤小铺的图。墨迹天气实时桌面墨迹天气的板块设置非常地科学，操作起来...
-
最准的手机天气预报最准的手机天气预报软
还记得6月北京那场说好的暴雨黄色预警么最准的手机天气预报？直到气象资料显示，6月21日到24日，北京全市平均降雨量达92毫米。小伙伴们还在惊呼，雨都下到哪去最准的手机天气预报了。之所以大家有这一感觉，是因为虽然暴雨预警同时发布，但各地暴雨却未同一时间抵达。未来天气预报能否做到精细化预报？答案是肯定的！未来智能网格化预报可以提供基于你电脑IP地址和手机位置的降...
-
今天天气预报24小时实报天气预告24小时
广西防城港局地出现大暴雨102~125毫米，最大小时雨量52~111毫米 二重点天气预报 1华南南部有分散性强降雨 受低层切变影响，9日夜间至10日。天津今天天气 12℃~23℃ 晴，明天 14℃~28℃ 晴，后天 11℃~23℃天津天气预报让您了解天津明天和未来一周的天气预报情况。当前位置 首页 24小时降水量 类型 更多 降水量 0407 1400 04...
-
ACDSEE是什么？
ACDSEE是什么？，软件,数码，ACDSee是用于进行数字资产管理、图片管理编辑的工具软件，也是使用最为广泛的看图工具软件，它的特点是支持性强，打开图像档案的速度快，能打开包括ICO、PNG、XBM在内的二十余种图像格式，并且能够高品质的快速显示。也提供了许多影像编辑的功能，包括数种影像格式的转换。ACDSee Photo Studio...
-
今日猪价最新价西安（今日肉价今日全国猪肉
而这也使不少投资者认为或将是反弹行情的来临,生猪价格行情分析生猪价格高位弱势运行,为国内钢铁企业。金投价格网，据中国报告大厅对2020年9月16日全国生猪价格最新行情预测走势监测显示2020年9月16日全国，据今日全国猪肉价格最新消息了解，图片，全国生猪市场均价为38元/斤。阿里巴巴也提供相关西安猪肉供应商的简介,Tags猪肉价格生猪期货相关推荐2021猪肉...
-
中国人为什么喜欢用俗语？这些俗语与春秋的
中国人为什么喜欢用俗语？这些俗语与春秋的义理和中国人的文化有什么联系？，文化,中国人,春秋，答题：（1）俗语通俗易懂，通常适合老百姓的语言表达，而不是文字表达。（2）春秋的义理，属于上层的文化，因要写在竹签上，故對每一个字要运用的恰如其分。好的作品、文章才能流传下来，所以在文字的运用和表达上必须严谨。（3）日常生活中的俗语，是经过老百姓领...
-
郭文博——贝加尔湖畔的一个传奇
郭文博——贝加尔湖畔的一个传奇，贝加尔湖,中国人,豆腐,伊尔库茨克， 50岁出头的郭文博，面容黢黑，结实、精干，看上去也只有四十岁左右。作为一个在俄罗斯拥有自己土地并盖了一间酒店的中国人，他没有单独的豪华的办公室，只是在权当酒店前台的小小的管理人员的办公室里占据了一个角落。但是满墙的照片，却显示了这个东北汉子不一般的经历。25年前，郭文...
-
今日生猪价格安徽阜阳，今日生猪价格表
首页猪猪报价安徽省阜阳市临泉县生猪土杂猪价格该信息已被访问3次临泉县生猪土杂猪价格发布日期报价地点安徽省阜阳市临泉县产品名称生猪产品类别土杂猪价格100元/公斤报价类型报价数量0ip地址。阜阳市场生猪价格行情农产品价格行情市场价格市场提示聚焦机构报告国储动态生产统计河南河北安徽江苏山东广东福建浙江四川陕西内蒙古甘肃湖北首页农产品粮食玉米，分别为上海市、安徽省...
-
世界杯抽签分组（2022卡塔尔世界杯分组抽签
北京时间2日凌晨，2022卡塔尔世界杯抽签分组仪式在多哈结束，32支参赛球队（29支球队确定出线，3组附加赛尚未进行）通过抽签落位在8个小组（每组4支球队，前4个小组为上半区）——按照竞赛规则，每组前2名球队小组出线晋级16强，16强赛的对阵规则为A组出线球队与B组出线球队交叉淘汰（其余小组以此类推）。最终抽签结果显示，卡塔尔世界杯小组赛不会缺乏“刺激”场景...
-
oppo手机怎样设置投屏(oppo手机投屏设置
1、工具/原料:手机，OPPOReno4。 2、首先，点击桌面上的设置。 3、进入设置页面，点击其他无线连接。 4、进入之后，点击手机投屏。 5、进入之后，点击手机投屏后边的按钮。 6、显示呈打开状态，配对同一网络的设备，就可实现投屏。...
-
毕节跟兴义哪个城市的规模更大？
毕节跟兴义哪个城市的规模更大？，毕节,兴义,城市规模，就目前城市规划及布局来看，毕节七星关城区没有兴义城区规模大，如果大方撤县设区及金海湖区挂牌成立，毕节就有三个区，城区人口突破100万，大毕节同城化板块即将来临，明年成贵高铁开通，毕节再上新台阶，未来毕节将是川滇黔交汇处的中心城市，不要说和兴义比，完全有超越遵义的趋势位居贵州老二，成为贵...
-
内地票房连冠今日冲10亿 《芳华》成冯小
内地票房连冠今日冲10亿 《芳华》成冯小刚最卖座电影，芳华,冯小刚,电影，封面新闻讯（记者 杨帆）根据Mtime Pro数据显示，12月27日（周三）内地电影大盘勉强破亿，冯小刚导演作品《芳华》蝉联单日票房冠军。《芳华》上映第13天新增票房3273万元芳华票房，累计票房9.65亿，分账票房也正式跨过9亿大关，超越《老炮儿》成为冯小刚最卖座...
-
申请qq号是怎么申请的？
申请qq号是怎么申请的？，qq,腾讯，1、打开QQ登录界面，点击注册账号。2、点击注册账号后会弹出一个网页来，这里可以有几种方式申请qq，第一种是填写好资料，腾讯就会分配一个qq号给你，我们还可以使用自己的手机号码，邮箱注册。3、注册信息的页面，按照上面的要求，把内容填好，就可以。4、内容填好之后，点击最下面的立即注册。就可以，然后就会弹...
-
移动领取的腾讯会员怎么用？
移动领取的腾讯会员怎么用？，腾讯,腾讯会员,移动互联网，移动手机号领取了腾讯视频会员使用方法;以苹果手机操作为例:1.首先打开并进入腾讯视频App。2.进入腾讯视频页面后,在用户隐私政策概要上点击右下角的同意。3.接着在当前页面,点击左下角的微信登录选项。4.成功登录后,在首页右下角的点击并进入我的选项。5.进入我的页面后下滑找到并点击进...