文本溢出隐藏

/* 多行溢出隐藏 */
div{

    width: 150px;(100%);
    height:100px;
    display: -webkit-box;

     -webkit-box-orient: vertical;

     -webkit-line-clamp: 3;

    overflow: hidden; 8

}

  

/* 单行溢出隐藏 */
div{
     width: 150px;
     white-space: nowrap;
     overflow: hidden;
      text-overflow: ellipsis;
}

  

原文地址:https://www.cnblogs.com/winyh/p/10279015.html

时间: 2024-10-16 19:09:19

文本溢出隐藏的相关文章

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

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

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

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"

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

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

文字溢出隐藏,隐藏的问字用省略号表示

之前在写页面的时候用的都是单行文字溢出隐藏,今天遇到了多行文字溢出隐藏,溢出部分用省略号.我通过查阅一些资料整理了一下,拿出来与大家分享一下. 单行文本的溢出隐藏 对于单行文本溢出 隐藏,text-overflow: ellipsis 就能完美的解决,不过在使用他时,一定要结合  overflow: hidden和   white-space: nowrap;,我有时就忘记写了,导致效果出不来,还让我找了半天. 1 <!DOCTYPE html> 2 <html> 3 <he

css_文本溢出

1.单行文本溢出隐藏,显示省略号 2.多行文本溢出隐藏,显示省略号 1.只针对用webkit内核浏览器渲染页面才会有效果 2.(多行文本溢出隐藏,显示省略号)通用方法 原文地址:https://www.cnblogs.com/yangyutian/p/10747953.html

前端面试题-文本溢出显示省略号(...)

一.文本溢出隐藏 如下图所示,我们需要对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计的心情) 二.单行文本溢出隐藏 <style type="text/css"> .text { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } </style> 1. 注意 以上设置是单行文本溢出隐藏的3个必须CSS属性,缺一不可. 2. 说明 over

控制表格内的文本溢出时隐藏

table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ text-align:center; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overflow:hid

html文本溢出

关于溢出: 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidden:内容会被修剪,并且其余内容是不可见的: scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容; auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容; inherit:规定应该从父元素继承overflow属性的值. 2.空余空间 white-spac

新人跳坑系列《二十》文本溢出

分享者:toBeMN 文本溢出是一个非常常见的问题,尤其是在手机端上<ignore_js_op> 这是理想中的状态,但是对于长标题来说,可能就要崩溃了 轻者换行<ignore_js_op> 重者样式崩坏<ignore_js_op> 当一行文字超过了限定范围,就会出现换行等现象,这就叫文本溢出该如何解决文本溢出呢,其实只要短短一块css代码即可<ignore_js_op> 现在界面好看了吧(至少从我的审美出发还可以)<ignore_js_op> 超