【css】 css中换行

容易混淆的几个换行属性

  • word-break:break-all；/* 单词内换行 */
  • word-wrap:break-word;/* 以单词/网址/换行 */
  • white-space:pre-wrap;/* 保留空白 */
  • white-space:nowrap;    /* 不换行 */
复制代码
<!DOCTYPE html>
<html>
<head>
<style> 
.wrap{
    width:11em; 
    border:1px solid #000000;
}

p.test1{
    word-wrap:break-word;
}

p.test2{    
    word-break:break-all;
}
p.test3{
    white-space:pre-wrap;
}
p.test4{
    white-space:nowrap;
}
</style>
</head>
<body>

<p class="wrap test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="wrap test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="wrap test3">
    <b>注释：</b>
    目前 Opera 不支持 word-break 属性。

</p>
<p class="wrap test4">
    <b>注释：</b>
    目前 Opera 不支持 word-break 属性。

</p>

</body>
</html>
View Code
复制代码

效果图

 

 

 

 

 

 

 

posted on   smile轉角  阅读(434)  评论(0)  编辑  收藏  举报

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

导航

统计

点击右上角即可分享
微信分享提示