要加在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. android基础---->XMl数据的解析

    在网络上传输数据时最常用的格式有两种,XML和JSON,下面首先学一下如何解析XML格式的数据,JSON的解析可以参见我的博客(android基础---->JSON数据的解析).解析XML 格式 ...

  2. F - Toy Storage

    来源poj 2398 Mom and dad have a problem: their child, Reza, never puts his toys away when he is finish ...

  3. G - Rabbit and Grass

    大学时光是浪漫的,女生是浪漫的,圣诞更是浪漫的,但是Rabbit和Grass这两个大学女生在今年的圣诞节却表现得一点都不浪漫:不去逛商场,不去逛公园,不去和AC男约会,两个人竟然猫在寝食下棋-- 说是 ...

  4. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  5. day8 八、文件操作模式、文件的复制与文件游标操作

    一.文件操作 1.wr模式结合 ① w = open('1.txt', 'w', encoding='utf-8') # w:没有文件新建文件,有文件就清空文件 w.write('000\n') w. ...

  6. Robot Framework使用For循环

    1.普通的For循环 在一个普通的For循环中,循环开始的关键字是 :FOR ,其中的:用于与一般关键字做区分,对于循环结构体内的每一行,使用 \ 作为改行的行首关键字.对于循环中的变量,可以在 IN ...

  7. MySQL 安装 用户管理 常用命令

    MySQL目录 数据库概览   数据库介绍 Why Choose MySQL MySQL的前世今生 MySQL的安装   Windows安装MySQL5.721 installer版 Windows安 ...

  8. tensorflow如何正确加载预训练词向量

    使用预训练词向量和随机初始化词向量的差异还是挺大的,现在说一说我使用预训练词向量的流程. 一.构建本语料的词汇表,作为我的基础词汇 二.遍历该词汇表,从预训练词向量中提取出该词对应的词向量 三.初始化 ...

  9. #include<stdio.h> #include "stdio.h"

    https://baike.baidu.com/item/#include <stdio.h> #include <stdio.h> 编辑 #include<stdio. ...

  10. AndroidStudio_RecyclerView

    在这里回顾一下RecyclerView的用法 RecyclerView的用法与Button的用法很类似,只是要增加一个Adapter.java文件和item.xml文件 具体用法: 1.在page1. ...