用HTML加javascript实现打字机样的效果…当字符串为英文时无法自动换行…中文时可以自动换行
<?xml version="1.0" encoding="utf-8" ?>
<!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=utf-8" />
<title> test typing </title>
<script type="text/javascript" src="js/temp.js">
</script>
</head>
<body>
<div id="myDiv" style="width:200px; height:100px; border:2px #ccc dashed; padding:10px"></div>
<script>
var typingText = "abcdefghijklmnopqrstuvwxyzwhy中文字符可以自动换行不会超过边框";
var count = 0;
var myBlock = document.getElementById("myDiv");
function type(){
if(count <= typingText.length){
myBlock.innerHTML = typingText.substring(0, count);
count++;
}else{
window.clearInterval(intervalID);
}
}
var intervalID = window.setInterval(type, 200);
</script>
</body>
</html>
原因:
对于长英文或数字,浏览器认为一个单词,html默认是不会回车换行的,所以没有将其换行处理。可以通过css样式来实现换行的效果
css code: word-wrap:break-word;overflow:hidden;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
* {
word-wrap: break-word;
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="3" cellspacing="1" style="border:1px solid #CEDFF5;" bgcolor="#DFE8F6">
<tr bgcolor="#FFFFFF">
<td align="center" nowrap width="300">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="word-break:break-word,white-space: -moz-pre-wrap;table-layout:fixed;">
<tr><td>BEHxyJHptKZ4GsvQe2oeyX_lNGwlMNmRENPvGs2qiO_Ej7yOj7VBPB8AmXzgyGB4be测试测试测试测试</td></tr>
</table>
</td>
</tr>
</table>
</body>
分享到:
相关推荐
vue 中 用 {{}} 进行数据绑定的时候,如果我么你想让字符串换行是不生效的 解决办法,不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 “<b>1111</b><br>2222” 例1, <div>{{str}}<div> 例1效果...
原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行。那么,难道我们得在每个字母中间加入一个空格来解决这个问题么?其实不用的,可以通过CSS实现。 解决...
1.用标签实现不换行 复制代码代码如下: <div>Hello world!<nobr> Hello world!<nobr></div> ...4.如果是两个div,可使用float实现不换行 复制代码代码如下: <div class=”class1″>hello </div> <div cla
DIV CSS 图片自动换行 图片带鼠标效果
NULL 博文链接:https://xieruilin.iteye.com/blog/1473020
1、强制不换行,同时以省略号结尾。 复制代码代码如下: <div xss=removed> 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2、css自动换行 ...若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的
一个div可自行编辑,任意输入文字可自动换边且不变形
之所以写这个,是因为发现SQL注入和XSS中经常利用十六进制表示的字符串,比如 SELECT CONCAT(0x68656c6c6f); 得到的是hello <!DOCTYPE html> <html> <head> <title>Hex-Char Bi-Converter&...
DIV 文字可以换行但是纯数字和字母不可以换行解决方案
兼容多浏览器的强制不换行的CSS,主要以DIV为列子,分析个浏览器的解析特性
1、itext将静态html转pdf中文显示及换行问题 2、itext将静态html转pdf 字体问题 3、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502
多个div能不换行吗?能否自动把父容器撑开?请下载直接运行即可。可直接与我联系,我一直在csdn。
.NET获取Html字符串中指定标签的指定属性的值 本代码为C#获取字符串中Html的指定标签的指定属性的值 ...要获取以上字符串中的img中的src或是a中的href等的值 GetHtmlAttr(tempstr,"img","src")这样就能获取到。
在工作中评论内容测试遇到评论着的评论内容为:“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要...
字体超过div范围自动换行
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认...1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all;
div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条
主要介绍了td,div标签里内容不换行的方法,需要的朋友可以参考下