文字越界换行

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                padding: 10px;
                width: 200px;
                height: 200px;
                border: 1px solid red;
                margin: 20px;
                float: left;
                display: inherit;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: normal;
                table-layout: fixed;
                word-break: break-all;
            }

            #DDD {
                border: 0px;
                clear: both;
                height: 400px;
                width: auto;
            }
            textarea{
                resize: none;
                width: 600px;
                height: 100px;
                padding: 5px 10px 5px;
                border: 1px solid burlywood;
                font-size: 16px;
                font-family: script;
            }
            textarea:focus{
                border: 1px solid blue;
            }
        </style>

        <script language="javascript">
            //countChar(a,b)为多行文本框统计输入字符
            function countChar(textareaName, spanName) {
                var maxLimit = 100;
                var textArea = document.getElementById(textareaName);
                var spanCount = document.getElementById(spanName);

                if (textArea.value.length > maxLimit) {
                    spanCount.innerHTML = '0';
                    textArea.value = textArea.value.substring(0, maxLimit)+'......';
                } else {
                    spanCount.innerHTML = maxLimit - textArea.value.length;
                }
            }
        </script>
    </head>

    <body>
        <div id="div1">
            我们我们我们我们我们我们我们我们我我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我我们我们我们我们我们我们我们我我们我们我们我们我们我们我们我我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们我们

        </div>
        <div id="div2">
            appleappleappleappleappleappleapppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324ppleappleappledwaswrerewre12324324pleappleappleappleappleappledwaswrerewre12324324
        </div>

        <div id="DDD">

            <p><span>您还可以输入<span id="counter">500</span>个字</span></p>

                <textarea name="inputContent" class="ssmsarea" id="status" onKeyDown='countChar("status","counter");' onKeyUp='countChar("status","counter");'></textarea>

        </div>
    </body>

</html>
时间: 2024-11-18 22:48:24

文字越界换行的相关文章

PS里文字怎么换行

  PS里文字怎么换行         方法一: 1.打开Photoshop软件(各版本都可以),我在这里演示的是Photoshop cs6.打开界面如图所示 2.点击左上角的"文件" 按钮,然后设置相应的参数,新建一张图片.你也可以打开任意一张图片. 3.点击文字工具按钮 ,可以选择文字的方向和其他.如下图所示 4.在需要输入文字的位置点击以下,使出现文字输入框.如图红色框线内部的位置就是我的文字输入框 5.复制粘贴一段文字,可以先在电脑里面新建一个TXT文件输入需要的文字,然后再操

css强制文字不换行实例详解

强制不换行 CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 例  代码如下 复制代码 div{ white-space:nowrap; } 注意 .p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/ .p5{white-space:nowrap; overflow:hidden;

css white-space:nowrap属性用法(可以强制文字不换行输出)_CSS/HTML

强制不换行,直接使用white-space:nowrap即可.CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 复制代码 代码如下: div{white-space:nowrap;}

silverlight中导出pdf的文字部分如何换行

问题描述 导出的pdf文字不能换行,而且超出边界不能自动换行.很是苦恼,有遇到这类问题的前辈,多多指点.

Css实现div 文字自动换行并换行后对齐

div 文字自动换行 方法一,  代码如下 复制代码 <div>4545454545454545454454545445455454544545lllloioioiiioioioioioio</div> 这种非正常的字段,你给它加上word-break:break-all    IE下就强制换行了,但是在firefox下并不换行,我们可以使用另一种方法,在长字符串中间加入建议换行标志<wbr>可以每隔几个字符加一个,如:1111111111<wbr>1111

页面的强制换行问题总结

问题|页面 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed.但是在Firefox下面,会有一些问题,参考Gmail的一些做法,做了几个测试,得出一种解决办法. 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixe

CSS强制英文单词换行的方法

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #wrap{white-space:no

WPS独门利器——文字工具

现在网络上的资源越来越丰富,网上摘录变得越来越轻松,但是由于网页中文字的排版并不象常用的文字处理软件这么智能,因此,用户在对这些内容进行重新排版时往往会花费很多时间.目前的 WPS文字 已经考虑到用户的这种需求,专门设计了"文字工具"供用户使用,用户在整理文档的过程中,如果能够合理地利用这些工具,将会对提高工作效率有帮助.现在我们来认识WPS的独门利器--文字工具. 1.我们什么时候需要WPS文字工具? (1)如果您从网上摘录了大段文字,却发现排版格式极不规范,杂乱无章. (2)如果您

Excel表格如何换行?

  经常在办公室使用office的朋友可能比较关注excel,对于一些新手officer来说,在Word编辑文字,换行不是问题!但是转到Excel表格中工作,在单元格中编辑一些比较长的文字时,实现自动换行遇到麻烦. 在单元格中输入内容按常规需要换行时,按Enter键,却发现焦点移到了下一个单元格.希望在几个跨单元格的区域空间中显示一段注释文字,又需要先合并单元格,然后还得设置里面的文字对齐等格式,感觉很繁琐.经过几次摸索和学习,我总结出如下几种方法,可以全盘解决表格内文本换行问题. 批量单元格自