日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br>强制换行

昨天仿照娜姐做的标题滚动,自己照着那个js也写了一个,结果发现死活就是不滚动,今天早上发现原来还有一段CSS代码没有看到,这个css代码尤为重要、

其中就是有一个属性:

white-space:nowrap;

2、white-space参数:
normal :  默认处理方式
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。DIVCSS5推荐使用white-space:nowrap强制不换行

文章来源:http://www.divcss5.com/rumen/r401.shtml

滚动代码如下附上:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#scrollobj01,#scrollobj02 {
white-space: nowrap;
overflow: hidden;
width: 390px;
} </style>
</head> <body>
<div >
<div class="gdxw" style="width:510px; margin-top:3px;">
<img src="data:images/gdxl_tp2.gif" width="115" height="22" style="float:left;" />
<div id="scrollobj01" onmouseover="javascript:_stop01();" onmouseout="javascript:_start01();" style="float:left; width:390px; font-size:14px; font-family:'宋体'; color:#ff0214;">
生活生活生活生活生活生活生活生活生活生活生活生活
<a href="${document.fileName}?id=${document.id}" target="_blank" style="color:#FF0214;"><b>${document.title}</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</#list>
</div> <script language="javascript" type="text/javascript">
<!-- function scroll01(obj) {
/*往左*/
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft == tmp) {
obj.innerHTML += obj.innerHTML;
}
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft >= obj.firstChild.offsetWidth) {
obj.scrollLeft = 0;
}
}
var _timer = setInterval("scroll01(document.getElementById('scrollobj01'))", 10);
function _stop01() {
if (_timer != null) {
clearInterval(_timer);
}
}
function _start01() {
_timer = setInterval("scroll01(document.getElementById('scrollobj01'))", 10);
} //-->
</script>
</div>
</div>
</body>
</html>

仔细看别人代码

white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行的更多相关文章

  1. 如何使文本溢出边界不换行强制在一行内显示?#test{width:150px;white-space:nowrap;}

    #test{width:150px;white-space:nowrap;}

  2. CSS强制文本在一行内显示若有多余字符则使用省略号表示

    这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...

  3. CSS控制文本在一行内显示,若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  4. 用CSS让字体在一行内显示不换行(收藏)

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  5. 用CSS让字体在一行内显示不换行

    青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小  当一行文字超过DIV或者Table的宽度的时候,浏览器 ...

  6. CSS控制字体在一行内显示不换行

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...

  7. CSS+DIV实现文字一行内显示,并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  8. dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.

    采用dom4j方式解析string类型的xml xml:        String string="<?xmlversion=\"1.0\" encoding=\ ...

  9. Python 让两个print()函数的输出打印在一行内

    1.两个连续的print()函数为什么在输出时内容会分行显示? 解:print()中有两个默认参数 sep 和 end,其中sep是代替分隔符,end是代替末尾的换行符,默认使用‘,’代替空格,且默认 ...

随机推荐

  1. HTML5之部分显示

  2. 洛谷比赛 Joe的数

    /* 开始暴力+滚动数组70 后来发现不用循环很多 找p的倍数 找%p意义下为0的就好了 */ #include<iostream> #include<cstdio> #inc ...

  3. codevs 3305 水果姐逛水果街Ⅱ

    /*我尼玛 又一个min打成max 看了半天....*/ #include<iostream> #include<cstdio> #include<cstring> ...

  4. GIT学习(一)-->Git产生的历史原因

    首先要说:Git是目前世界上最先进的分布式版本控制系统(没有之一). git的作者:Linus,林纳斯(下图就是,先膜拜一下,因为成就可不止这一点) 他是为何要写git的呢?话说 Linus虽然创建了 ...

  5. 【转】ibatis的简介与初步搭建应用

    [转]ibatis的简介与初步搭建应用 一.ibatis的简介 ibatis是什么东西就不介绍了,自己去找谷老师. 这里讲下自己的使用体会.之前自己学过Hibernate,是看尚学堂的视频教学的,看完 ...

  6. Python的基本配置

    Python是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法结 ...

  7. VB 活动添加item元素

    'ListView1.Columns.Clear() 'ListView1.Columns.Add("", 0, HorizontalAlignment.Center) 'List ...

  8. js删除数组指定的某个元素

    1.给js数组对象原型加indexof方法 获得元素索引 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.l ...

  9. javascript之typeof、constructor、instanceof

    ref: http://jingyan.baidu.com/article/29697b912f9939ab20de3c8c.html

  10. 泛型,迭代器,LinkedList<E>

    1 <e>里面只能填类,不能用基本数据类型,不过integer 这样的的也行 2在模板类(泛型类中)class demo<e>由于不知道e是那个,所有通常都是重写大家都有的to ...