white-space norma nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行

日常我们为了让文字内容在一行内显示完，哪怕宽度不够也不能换行，我们可以使用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="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>

 

仔细看别人代码

posted @ 2015-05-12 09:05  风儿风儿飞  阅读(2238)  评论(0)  编辑  收藏  举报