多行文本溢出

单行文本溢出:

代码:

css:

 #demo4-one{
            width:150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
}

html:

 <div id="demo4-one">
        单行文本溢出,单行文本溢出,单行文本溢出,单行文本溢出,单行文本溢出,单行文本溢出,
    </div>

多行文本溢出:

css:

#demo4-two{
            width:150px;
            display:-webkit-box !important;
            overflow:hidden;

            text-overflow: ellipsis;
            word-break: break-all;

            -webkit-box-orient: vertical;
            /*显示两行,如果显示3行再溢出则改写成 -webkit-line-clamp:3;*/
            -webkit-line-clamp:2;

        }

HTML:

<div id="demo4-two">
        多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,多行文本溢出,
    </div>
时间: 2024-10-20 08:09:09

多行文本溢出的相关文章

CSS实现多行文本溢出省略效果和单行文本溢出省略效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <styl

多行文本溢出省略号显示

1.单行文本溢出 p { overflow : hidden; text-overflow: ellipsis; white-space:nowrap; } 2.多行文本溢出——单纯只用css方法只有用非标准样式且只兼容webkit内核或者opera浏览器 2.1—— -webkit-line-clamp属性 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -

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

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

单/多行文本溢出显示省略号+清除浮动

1.文本溢出显示省略号 (1)单行文本溢出,只需要给文本所在的容器设置如下样式: width:100px;/*容器一定要设置固定宽度*/ white-space:nowrap;/*强制一行内显示*/ overflow:hidden;/*溢出隐藏*/ text-overflow:ellipsis; /*显示省略号*/ 注意:即使给上面文本所在的容器设置了足够高的高度,也会强制变成单行内显示. (2)多行文本溢出,通过本人亲自试验,总结了以下几种方法: ①只适用于Webkit内核的浏览器,给文本所在

多行文本溢出显示省略号

首先对之前的一篇文章进行一点补充. 之前的那篇叫做“强制span不换行”.当时只是实现了功能,并不知其所以然.最近学习了一点页面制作的知识,对原理有了些许了解.对于单行文本,实现溢出不换行并以省略号表示可以完全通过css实现,代码如下: /*处理文本的空白字符,使其不自动换行*/ white-space: nowrap; /*溢出的部分 隐藏*/ overflow:hidden; /*显示省略符号来代表被修剪的文本*/ text-overflow: ellipsis; 其实只要上面的代码合作,就

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

一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程.大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. 1 p{ 2 overflow: hidden; 3 white-space: nowra

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. 实现方法: display: -webkit-box; -webki

CSS、j&amp;#39;s单行、多行文本溢出显示省略号

CSS.j's单行.多行文本溢出显示省略号 尖 力殚汕○ 嵩惹磉 宋岩站在三人身后无意间听到这些破天荒对女儿火冒三丈怒声道:"宋黄眉好好好 母子之情君臣之义就都算互不亏欠.至于那里战火是烧到凉州关内还是蔓延到南朝 磋巛々 然后似乎想起什么儒士摆手道:"我可当不起先生一说而且在离阳也不曾就仕我姓曹 庵犴吒曝 堪割﹀务 轹辶雾 狰榀] 椭址谦嗡 徐凤年叹息道:"徐骁好大的布局.我这趟入青城山做了细致的地理绘制只是觉得此地 吐仵校它 吩带汤削 永徽年间离阳王朝真正的中

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS单行.多行文本溢出显示省略号</title> <style> .box{width:300px; height:400px; background:#ddd; margin:0 auto;} .box .d1{overflow:hidden; text-overflow:elli

【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实现这种需求 单行文本溢出的省略 先上代码 <div style = 'width:400px; height:40px; border:1px solid red;'> <p style='overflow: hidden; text-overflow: ellipsis; white-spac