[js]纯css强制不换行
要加在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强制不换行的更多相关文章
- css 强制不换行
强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{w ...
- CSS强制中英文换行与不换行
1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...
- CSS强制英文换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...
- css强制不换行 多出的字省略号
width: 100%;//需要指定宽度 overflow: hidden;//溢出隐藏 text-overflow: ellipsis; white-space: nowrap;//强制不换行 te ...
- 纯css 实现文本换行
业务场景:dialog中嵌套的表单,实现信息展示,由于存储路径过长并且在一行显示,导致多出的文字出现在弹出框外面了,页面极丑,所以需要将存储路径实现自动换行. 技术点:<p style=&quo ...
- 分享：纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- CSS自己主动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...
- CSS自动换行、强制不换行、强制断行、超出显示省略号
转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
随机推荐
- [原]openstack-kilo--issue(十八) Error parsing template file: Template format version not found.
在创建stack的时候出现的报错: ]# heat stack-create nems_demo -e AAA.yaml -f AAA.parameter.yaml Error parsing tem ...
- UML类图中的几种关系的画法和含义
UML的类图中,一共有以下六大关系: 泛化(Generalization), 实现(Realization), 依赖(Dependence),关联(Association),聚合(Aggregatio ...
- Page Visibility API 页面是否获取焦点 Event: visibilitychange
W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Docum ...
- 智能文件选择列表—— bat 批处理
智能文件选择列表 *.wim @echo off setlocal enabledelayedexpansion title 智能文件选择列表 pushd %~dp0 & cd /d %~dp ...
- 高效办公必不可少的5个Excel技巧
1.输入“001.002…”的编号 想要快速给表格添加上“001.002…”这样的编号,你可以这样做: 选择所有单元格——右键点击[设置单元格格式]——点击[文本]——点击[确定]即可. 2.单元格内 ...
- linux内核添加模块
参考: http://blog.csdn.net/gaoguoxin2/article/details/50220665 动态添加模块不需要编译内核. LINUX的模块主要由6部分组成: 1.模块的加 ...
- DB2 rollforward 命令使用详解
DB2 rollforward 命令使用详解 原文:https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-1003wuc ...
- 20165311 预备作业3 Linux安装及学习
Linux安装 由于回家没有带笔记本,所以把VirtualBox安装在家里的台式上,回学校之后再重新在自己的笔记本上安装虚拟机.参考<基于VirtualBox安装Ubuntu图文教程>,整 ...
- CH 1601 - 前缀统计 - [字典树模板题]
题目链接:传送门 描述给定 $N$ 个字符串 $S_1,S_2,\cdots,S_N$,接下来进行 $M$ 次询问,每次询问给定一个字符串 $T$,求 $S_1 \sim S_N$ 中有多少个字符串是 ...
- POJ 3974 - Palindrome - [字符串hash+二分]
题目链接:http://poj.org/problem?id=3974 Time Limit: 15000MS Memory Limit: 65536K Description Andy the sm ...