- Div
- IE
- white-space:normal (standard)
Example:
#wrapDiv{white-space:normal; width:100px; }
<div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>
- word-break:break-all(got from Word)
Example:
#wrapDiv{ word-break:break-all; width:100px; }
<div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>
- FireFox
There is no better solution, the solution is similar to IE, just add a overflow:hidden or overflow:auto. For instance:
#wrapDiv{white-space:normal; width:100px; overflow:hidden }
<div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>
#wrapDiv{ word-break:break-all; width:100px; overflow:hidden }
<div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>
- Table
- IE: table-layout:fixed + nowrap(optional)
- Example1:
<style type="text/css">
.TableAutoWrap1
{
table-layout:fixed;
}
</style>
<table class="TableAutoWrap1" width="100">
<tr><td>
</td>timeislifetimeislifetimeislife are you sure</tr>
</table>
- Example2:
<style type="text/css">
.TableAutoWrap1
{
table-layout:fixed;
}
</style>
<table class="TableAutoWrap1" width="100">
<tr><td>
</td nowrap>timeislifetimeis lifetimeis lifeareyousure</tr>
</table>
- Example3:
<style type="text/css">
.TableAutoWrap1
{
table-layout:fixed;
}
</style>
<body>
<table class="TableAutoWrap1" width="100">
<tr><td>
</td nowrap width="50%">timeislife timeis lifetimeis lifeareyousure<td></td></tr>
</table>
- FireFox: table-layout:fixed + nowrap(optional) + div
So far, there is no good solution for Fixfox, the only workaround is to hide the overflowed text, and the td's width must use percentage instead of absolute width.
For example:
<style>
.tableAutoWrap {table-layout:fixed}
.td1 {overflow:hidden;}
</style>
<table class="tableAutoWrap" width=80>
<tr><td width=25% class="td1" nowrap>
<div>ttimeislifetimeislifet imeislifeimeislife</div>
</td>
<td class="td1" nowrap><div>ttimeislifetimeislifet imeislifeimeislife</div></td>
</tr>
</table>
Note: all the foregoing solution will only be word-wrap (line-wrap) at the blank of a string of long characters, if you want to make the word-wrap occurs at every position where the length of the characters exceed the line width, you can use the following CSS element:
<style type="text/css">
.textarea1
{
overflow:hidden;
}
</style>
<textarea class="textarea1" cols="10" rows="4">ccccccccccccccccccccccccccc</textarea>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架