css 单行文本溢出显示省略号解决办法

样式代码，四个属性都是必须的，并且宽度必须设在当前容器上，父容器定宽无效：

 代码如下 复制代码

.box {
 width: 200px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

测试 IE6、IE7、IE8、IE9、Chrome、Firefox 均支持。

测试实例

 代码如下 复制代码

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>text overflow ellipsis</title>
 <style>
  .box {
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }
 </style>
</head>
<body>
<h1>text overflow ellipsis</h1>

<div class="box">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>
</html>
时间： 2024-09-25 09:56:14

css 单行文本溢出显示省略号解决办法的相关文章

css实现多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性.  代码如下 复制代码 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果. WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比

行文本溢出显示省略号(...)的方法

个人使用的方法 .ellipsis1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ellipsis2 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: verti

uc浏览器不显示图片解决办法

  uc浏览器不显示图片解决办法.现在,不少人都在使用uc浏览器,但是在使用过程中,有用户反映,uc浏览器不显示图片怎么办?很多朋友可能还不知道,下面小编给你分享下uc浏览器不显示图片解决办法. uc浏览器 方法 1关闭移动网络,过一会儿再打开网络. 有时,由于移动网络的不稳定,网速很慢,会导致uc浏览器在启动后,图片迟迟不能显出出来.这时,你可以选择关闭网络,过一会再开启uc浏览器. 当然,你也可以走动一下,去信号稍微好一点,网络稳定的地方再打开uc浏览器. 2uc浏览器设置错误. 有时,打开

U盘无法显示的解决办法

  U盘无法显示的解决办法电脑已经识别到U盘,但打开"我的电脑"却不能看到相应的盘符.进入"管理工具"中的磁盘管理(在"运行"里输入diskmgmt.msc后回车),可以看到该盘,但没有分配盘符.手动分配一个盘符g,但打开"我的电脑",仍然没有出现U盘盘符.在地址栏输入g:,提示找不到file://g:/文件.如果在磁盘管理执行格式化该U盘,则提示无法格式化,该卷未被启用.如果在磁盘管理中右键点刚分配的g盘,选择资源管理,则提

UIMenuController在Cell内部无法显示的解决办法（iOS9.2）_IOS

Xcode7.2,iOS9.2环境下  尝试在CollectionViewCell内部,添加LongPress手势,显示UIMenuController. @implementation CollectionViewCell //继承自UICollectionViewCell UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@sel

[紧急求助]使用Axis2做成的Web Service上传文件，文件超过100M时，内存溢出，求解决办法

问题描述 使用Axis2做成的WebService上传文件,文件超过100M时,内存溢出,求解决办法JVM的缓存已经设置的足够大了,修改缓存的方法不可行请提供其他方法或者是Axis2对上传文件的大小有限制 解决方案 解决方案二:怎么没有人回复阿解决方案三:崩溃了,怎么没有人回复阿

CSS/Js文本溢出自动添加省略号ellipsis

  CSS文本溢出省略号 text-overflow:ellipsis ext-overflow是一个比较特殊的属性,W3C早前的文档中(目前的文档中没有包含text-overflow属性,FML!)对其的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip : 不显示省略标记(-),而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记(-),省略标记插入的位置是最后一个字符. elli

Js与css实现文本溢出自动添加省略号方法总结

1.常规css方法--可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示 这是一段测试文字,主要是用来测试文字溢出后是否会用省略号显示.  代码如下 复制代码 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 2.使用ellipsis.xml文件使Firefox支持文字溢出后点

Word不显示图片怎么办？word不显示图片解决办法

  打开word文件时,有时候会遇到不显示图片的情况.word文件中图片无法显示有什么解决办法? 下面小编简单为大家总结一下几种原因及解决方法. 情况一: 可能是由于正在普通视图或大纲视图中工作. 解决方法:若要查看页眉.页脚或图形对象等对象在打印页中的位置,请切换到页面视图.若要查看这些对象在 Web 版式视图中的显示情况,请切换到 Web 版式视图. 情况二: 屏幕上显示的可能是链接的嵌入式图形的域代码.域代码是括在域字符 ({}) 中的指令. 解决方法:若要关闭域代码并显示图形,请按 Al