要加在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. 一篇文章带你看懂Cloudflare信息泄露事件

    版权声明:本文由贺嘉  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/753847001488039974 来源:腾云阁  ...

  2. linux sysfs文件系统

    个人理解:sysfs向用户空间展示了驱动设备的层次结构.我们都知道设备和对应的驱动都是由内核管理的,这些对于用户空间是不可见的.现在通过sysfs,可以在用户空间直观的了解设备驱动的层次结构. 我们来 ...

  3. 前端模板学习bootstrap

    前端最主要的工作是布局,呈现数据,这与后台处理数据的工作迥然不同,所以要多看别人写的好的模板.但是别人用到的css,js文件和我们的都不太相同,所以很多模板不能拿过来直接用,要经过简单的修改才能使用, ...

  4. JVM源码分析之栈溢出完全解读

    概述 之所以想写这篇文章,其实是因为最近有不少系统出现了栈溢出导致进程crash的问题,并且很隐蔽,根本原因还得借助coredump才能分析出来,于是想从JVM实现的角度来全面分析下栈溢出的这类问题, ...

  5. 微信jssdk上传图片，一张一张的上传 和 一次性传好几张

    //html模板 <div class="zhaopin_3_2"> <div id="bbb"></div> <im ...

  6. triangular distribution

    mode(众数), 一组数据中出现次数最多的那个(或那些)数值. 众数可以不存在或多于一个. 例如, 1,2,3,3,4的众数是3. 1,2,2,3,3,4的众数是2和3. 1,2,3,4,5没有众数 ...

  7. [No0000118]SQL Server附加数据库拒绝访问解决方法汇总

    修改权限 打开要附加的数据库文件所在的文件夹,右键单击mdf文件,选择“属性”: 单击“安全”选项卡,给所有用户添加读写权限. 最后点击"确定"就可以了.修改权限完成后,你就可以成 ...

  8. 配置llama实现impala on yarn-验证未通过，仅以此文作为参考

    以下内容采自网络,目前验证未通过,仅以此作为参考: 简介:早期的Impala版本中,为了使用Impala,我们通常会在以Client/Server的结构在各个集群节点启动impala-server.i ...

  9. 一个生产可用的mysql参数文件my.cnf

    [client]#客户端选项设置#设置客户端和连接字符集default_character_set = utf8port = 3306socket = /opt/mysql-5.6.24/tmp/my ...

  10. deepin中Tomcat添加执行权限

    terwer@terwer-PC:~$ cd /opt/*tomcat*/bin terwer@terwer-PC:/opt/apache-tomcat-9.0.13/bin$ sudo chmod ...