div内的中英文字符串换行有关问题 _Web前端

div内的中英文字符串换行问题

用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">

<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;

<head>

* {

word-wrap: break-word;

}

</style>

</head>

<body>

? ? <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>