• 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="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; 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>

    仔细看别人代码

  • 相关阅读:
    atitit.atiOrmStoreService 框架的原理与设计 part1  概述与新特性
    Atitit. atiOrder   Order 订单管理框架的设计
    Atitit.为什么小公司也要做高大上开源项目
    Atitit.atiInputMethod v2词库清理策略工具    q229
    12条黄金法则
    数据库主键设计
    xhtml常见问题
    程序员面试宝典
    采用XHTML和CSS设计可重用可换肤的WEB站点
    XHTML基础问答
  • 原文地址:https://www.cnblogs.com/woxiangxintj/p/4496381.html
Copyright © 2020-2023  润新知