用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>
分享到：
相关推荐
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远...div中英文自动换行 复制代码代码如下: <div style=”word-break:break-all;width:20px
在本例中，我们要探讨的是如何使用JavaScript来实现连续英文字符在指定宽度限制下的自动换行，并确保该方案能够在不同的浏览器（包括较老的IE6和IE7，以及Firefox）中兼容运行。 在CSS中，通常可以使用`word-wrap`...
在网页设计中，经常会遇到一个有趣的现象：当我们在一个`<div>`容器内输入文本时，文本能够正常换行，但若该文本只包含纯数字或字母时，却无法自动换行。这可能会影响页面的布局与美观性。为了解决这一问题，我们...
然而，在处理英文文本尤其是包含长单词或连续英文字符串时，自动换行可能会遇到挑战。本文将探讨如何有效地实现英文自动换行，并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制...
**目的**：避免过长的连续字符串（如`aaaaaaaaaaaaa`）撑大布局。 **CSS实现**： - 使用`word-break: break-all`属性。 - `word-wrap`属性虽然也可以实现类似效果，但兼容性较差。 **兼容性分析** 1. **IE**、**...
强制换行是为了遇到一些超长的连续字符串（比如 aaaaaaaaaaaaaaaa）时不撑大布局。我们可以使用 `word-break: break-all;` 来实现强制换行。 在 Firefox 中不支持 `word-break` 属性，所以我们需要加 `overflow: ...
在网页设计中，我们经常会遇到一个问题，那就是英文文本在固定宽度的容器内无法自动换行，导致内容溢出。在CSS3之前，处理这种情况通常采用`overflow:hidden`或借助JavaScript来实现，但这并非最佳解决方案。自从CSS...
这个问题通常发生在用户输入了大量连续的无间隔英文字符，导致单元格(`<td>`)无法自动换行，从而破坏了表格的正常布局。 例如，用户输入像"lovelovelovelovelovelovelovelovelovelovelove"这样的字符串时，由于英文...
针对英文文本在固定宽度DIV中无法自动换行的问题，有以下几种解决方法： 1. 在文本适当位置手动加空格：对于开发者来说，如果提前知道文本中可能会包含过长的单词，可以在单词适当的位置手动添加空格。这样浏览器在...
总结来说，本文详细介绍了如何在JavaScript中使用正则表达式处理包含换行符的字符串，并通过具体实例展示了正则表达式在处理HTML内容时的应用，特别是如何应对由于空内容元素导致的换行问题。这对于前端开发人员在...
中英文混写，则在英文字符串的开始处换行（英文长度>div长度），结尾处不换行。 3.英文整个单词换行。等等，可能还有一些问题，这里只列出了常见的几个； 介绍上面几个css属性功能的简单用法； word-wrap:normal |...
比如在处理包含长字符串的连续英文字符和阿拉伯数字时，有时候这些文本不会按照预期进行换行，可能会出现溢出容器的情况。此时，我们可以使用CSS的word-wrap和word-break属性来强制文本换行。 word-wrap属性在IE...
`来固定表格的布局，然后对单元格应用`nowrap`属性，这样就能保证长的英文或数字字符串在单元格内自动换行。例如： ```css .tb { table-layout: fixed; } ``` 然后是HTML部分： ```html <td nowrap>...
- `break-word`：允许单词在必要时换行到下一行，即使这会导致单词内部的中断，比如在非英文字符或连字符处。 2. `word-break`属性： - `normal`（默认值）：遵循用户代理的默认断字规则，通常与`word-wrap: ...
在网页设计中，文本自动换行是一个常见的需求，特别是在处理长字符串或无法预先确定宽度的元素时。在不同的浏览器中，实现文本自动换行的方法可能会有所不同。本文将详细讲解如何在Firefox中实现文本自动换行。 一...
`属性来强制断行，使得长字符串可以被拆分并在必要时换行显示。 例如： ```css #wrap { word-break: break-all; width: 200px; } ``` 而对于Firefox浏览器，该问题较为复杂。由于Firefox没有提供直接的断行控制...
- **`strpbrk()`**：在一个字符串中查找另一个字符串中的任一字符首次出现的位置。 - **`strstr()`**：在一个字符串中查找子字符串首次出现的位置。 - **`strtok()`**：将字符串分割成多个子字符串。 #### 数学计算...