单行文本溢出省略号,多行文本?

单行CSS:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行CSS:(比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器)

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

用插件多行CSS:

值得注意:

  1、wrap中文用letter

  2、引入JQ文件与插件文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/jquery.dotdotdot.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $(‘.box‘).dotdotdot({
                wrap: ‘letter‘
            });
        })
    </script>
    <style type="text/css">
        .box {
            width: 275px;
            border: 1px solid #ccc;
            height: 100px;
        }
    </style>
</head>
<body>
<p class="box">
    Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本,直到一个未知的印刷者制作了一个活版盘的类型,并且把它制作成一个样本书。它不仅存活了五个世纪,而且引领电子行业印刷的发展,形式上基本上保持不变。</p>
</body>
</html>
时间: 2024-10-23 15:36:41

单行文本溢出省略号,多行文本?的相关文章

(转)文本溢出省略号……

p { overflow: hidden; white-space: normal; height: 3em;  text-overflow: ellipsis; } 除了css属性,通过js实现(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度) $(".figcaption").each(function(i){ var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p

单行文本如何转换为多行文本?

我们在日常的CAD绘图工作中,常常会遇到现有的文字文本不满足新的CAD制图修改工作,需要再次进行编辑修改.例如,为了更加精准地绘图修改,我们常常需要把单行文本转换为多行文本.今天小编就给大家分享一些文本编辑的一些小方法.具体操作如下: 单行文本 在专业的制图软件--迅捷CAD编辑器专业版里操作如下: 1.点击单行文字编辑图标,按照相应的命令指示,我们输入一串单行文本文字. 2.或是直接在命令框里输入"DTEXT"命令字符:按照相应的命令指示,我们输入一串单行文本文字. 单行文本到多行文

浅谈文本溢出省略号代表修剪text-overflow

一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性.

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

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

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

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

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

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

css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 原文地址:https://www.cnblogs.com/baobao0205/p/11620418.html

CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果: 原文地址:https://www.cnblogs.com/zzz-knight/p/11644912.html

单行文本溢出显示省略号.多行文本溢出显示省略号

单行文本溢出显示省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib