css3溢出隐藏显示小数点

.test{
width: 150px;
height:40px;
border:1px solid #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.test2{
width: 150px;
border:1px solid #000;
display: -webkit-box;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
overflow: hidden;
}
.test3{
width: 150px;
}
p{

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

<div class="test">测试在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示</div>
<div class="test2">
测试在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示

</div>
<div class="test3">
<p>测试在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示</p>
</div>

时间: 2024-10-17 15:43:21

css3溢出隐藏显示小数点的相关文章

css文本溢出隐藏显示省略号(单行+多行)

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     overflow: hidden;//文本溢出隐藏     text-overflow: ellipsis;//文本溢出显示省略号     white-space: nowarp;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在webkit内核中,可以利用-webkit-

text-overflow文本溢出隐藏“...”显示

一.文本溢出省略号显示 1.文本溢出是否"..."显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时"..."显示) 定义此属性有四个必要条件:1)须有容器宽度:width:value: 2)强制文本在一行内显示:white-space:nowrap: 3)溢出内容隐藏:overflow:hidden: 4)溢出文本显示"...":text-overflow:ellipsis: 2.溢出属性:overf

(有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug

项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧width:80px:. 本来在我的机器上是各种ok的,可是交给后端的兄弟们后发现在他的机器上左侧并没有flex:1; 总是以一个固定的宽度杵在那里,破坏掉布局,后来一查看,原来是后端的chrome是最新版本, 而我的这台机器是旧版本,两个版本的chrome对display:flex的解析竟然不一样. 解决

td也可以溢出隐藏显示

或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了. table真的过时了么?你真的了解table么?你真的会用table么? 打口水仗不是我们要做的,留给那些时间很充裕的人吧. 言归正传: 不记得是什么时候,有人在用table模拟DataGrid的时候说,为什么td超出设置为固定宽度的文字不能隐藏,而是会直接换行呢? 是的,事实确实如此,如: <style type="text

CSS多行溢出隐藏,webpack打包删除代码 -webkit-box-orient: vertical;

文本多行溢出隐藏显示省略号,本地显示正常,打包后线上代码丢失,-webkit-box-orient: vertical; /*! autoprefixer: off */ -webkit-box-orient:vertical; /*! autoprefixer: on */ 解决方式 1 :使用autoprefixer 跳过webpack的css打包. 解决方法 2 : 待补充 原文地址:https://www.cnblogs.com/lishengye/p/10990248.html

解决一行文本溢出隐藏点击展开之后全部显示并自动换行

var ele=[$("#customize p"),$("#uploadques p"),$("#memberques p")]; var i=0; (function() { ele[i].click( function () { console.log(this); console.log($(this).height()); if ($(this).height() === 20) { $(this).find("i"

td 不换行 隐藏显示多余的部分(转)

转自:http://sha-tians.iteye.com/blog/1996162 table中td固定宽度后overflow:hidden不生效的问题 博客分类: html/css/js 前两天遇到一个问题,在调试一个表格的格式时,设定了td的宽度,结果内容超长时换行显示了,于是,在td的css中设定了: overflow:hidden;溢出隐藏 white-space:nowrap;文本不换行,直到遇到<br>标签为止 设置好之后,以为可以达到不换行且溢出隐藏的效果,但是结果是文本不换行

关于元素隐藏/显示的各种方法

元素的隐藏/显示可以说数使用频率最高的方法之一,比如二级菜单,响应式布局,透明过度等等许许多多的特效都会使用到,以下介绍一下元素隐藏的各属性以及他们的特性和使用方法:display  visibility  opacity  overflow  position 我们先设置一些共有属性: <head> <style> div{ width: 100px; height: 100px; background-color: #444; margin: 10px; color: #f00

新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用‘...’来代替, 我一想 这简单啊 只要给div加上text-overflow:ellipsis;属性就好了呗, 结果 怎么调也不行,你说把我压抑的啊 经过一阵查终于找到原因出在哪里里 原来text-overflow:ellipsis;的属性 得需要另外两个属性的配合才能实现 这俩分别是 over