要加在li上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 200px;

            border: 1px solid red;

            padding: 20px;

            line-height: 30px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

        ul li {

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

<div>

    <ul id="ul1">

        <li>1, test1</li>

        <li>2, test2</li>

        <li>3, test3</li>

    </ul>

</div>

<script src="data.js"></script>

<script>

    //

    var oUl = document.getElementById('ul1');

    var OLis = document.getElementsByTagName('li');

    for (var i = 0; i < OLis.length; i++) {

        OLis[i].onmouseover = function () {

            this.style.backgroundColor = "pink";

        };

        OLis[i].onmouseout = function () {

            this.style.backgroundColor = '';

        };

    }

    var oFrm = document.createDocumentFragment();

    for (var i = 0; i < arr.length; i++) {

        var oLi = document.createElement('li');

        oLi.innerHTML = '<li>' + arr[i].title + '----' + arr[i].desc + '</li>';

        oFrm.appendChild(oLi);

    }

    oUl.appendChild(oFrm);

</script>

</body>

</html>

[js]纯css强制不换行的更多相关文章

  1. css 强制不换行

    强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{w ...

  2. CSS强制中英文换行与不换行

    1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...

  3. CSS强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  4. css强制不换行 多出的字省略号

    width: 100%;//需要指定宽度 overflow: hidden;//溢出隐藏 text-overflow: ellipsis; white-space: nowrap;//强制不换行 te ...

  5. 纯css 实现文本换行

    业务场景:dialog中嵌套的表单,实现信息展示,由于存储路径过长并且在一行显示,导致多出的文字出现在弹出框外面了,页面极丑,所以需要将存储路径实现自动换行. 技术点:<p style=&quo ...

  6. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  7. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  8. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  9. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

随机推荐

  1. 利用selenroid扩展uiautoamtor的webview解析能力

    uiautomator是一个非侵入式框架,但是webview解析能力很弱.为了改进webview的支持,可以考虑把webdriver或者selenroid整合进来. 具体接入可参考:http://se ...

  2. tomcat使用同一个http端口如何配置多个web项目？

    1. 在server.xml中 如下配置: <Host name="localhost" appBase="webapps2" unpackWARs=&q ...

  3. RandomForest中的feature_importance

    随机森林算法(RandomForest)的输出有一个变量是 feature_importances_ ,翻译过来是 特征重要性,具体含义是什么,这里试着解释一下. 参考官网和其他资料可以发现,RF可以 ...

  4. lamp环境配置

     一.配置虚拟域名   1.为了模拟DNS,在本地hosts文件中设置一下  2.模拟三个项目  3.在apache中配置虚拟主机 去到apache的sites-available目录里复制三次def ...

  5. TF-IDF概念

    之前就了解过TF-IDF,现在做一个回顾. 概念: TF(Term Frequency)词频:一个文档中关键词出现的次数/该文档的总词数, IDF(Inverse Document Frequency ...

  6. H - Gold Coins(2.4.1)

    H - Gold Coins(2.4.1) Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:3000 ...

  7. Entity Framework Core的贴心：优雅处理带默认值的数据库字段

    对于用于保存记录添加时间的数据库日期字段,我们通常会设置一个 GETDATE() 的默认值,而不是在应用程序的代码中获取当前时间进行保存,这样可以避免由于web服务器时钟不同步引起的时间偏差. Ent ...

  8. 短信文本pdu模式解析

    来源于互联网 年代较长 如有侵犯 请联系删除 text模式主要发送字符集(有限的),不能用来发送中文,但是hex moder可以发送所有字符. pdu moder被所有手机支持,主要分为7bit 8b ...

  9. [No0000115]打开Excel2016提示内存或磁盘空间不足的解决方法

    症状: 法一:右键文件,并 解除锁定: 法二: 在系统的服务中查看Windows Firewall服务 和Windows Update服务是否开启,如果没有开启就把他们启动一下. 1.在桌面的[计算机 ...

  10. python中OrderedDict的使用

    很多人认为python中的字典是无序的,因为它是按照hash来存储的,但是python中有个模块collections(英文,收集.集合),里面自带了一个子类 OrderedDict,实现了对字典对象 ...