超出内容自动换行

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}
</style>

</script>

</head>

<body><div class="linebr">CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行</div>
</body>
</html>

要实现内容超出容器宽度时自动换行的样式效果,可以使用以下几种 CSS 属性组合来满足不同的需求: ### 单行文本超出自动换行 如果希望单行文本在遇到边界时自动换行,而不是溢出容器,可以结合 `white-space` 和 `word-wrap` 属性: ```css .single-line-wrap { white-space: normal; /* 允许换行 */ word-wrap: break-word; /* 在单词内部换行以适应容器 */ } ``` ### 多行文本超出自动换行 对于多行文本内容,并且需要根据容器大小动态换行,可以采用如下方式: ```css .multi-line-wrap { word-wrap: break-word; /* 允许长单词或URL地址内部进行换行 */ white-space: pre-line; /* 保留空白符序列,但正常换行 */ overflow: hidden; /* 超出部分隐藏 */ } ``` ### 长单词或 URL 地址内部换行内容中包含较长的单词或者 URL 地址时,为了防止它们破坏布局,可以强制在单词内换行: ```css .break-word { word-break: break-all; /* 允许在单词内的任何字符间断开换行 */ } ``` 这种设置尤其适用于用户输入可能包含非常长的字符串的情况,例如评论框或日志显示区域。 ### 指定特定字符后换行 如果希望仅在特定字符(如连字符 `-`)之后换行,同时保证字符串内部不换行,可以使用 `white-space: pre-line` 并结合其他属性: ```css .break-after-dash { overflow-wrap: break-word; word-break: break-all; white-space: pre-line; /* 保留空格和换行符,但在必要时换行 */ } ``` ### 内容超出显示省略号并换行 如果不仅需要自动换行,还需要在内容过多时显示省略号,则可以通过 `-webkit-line-clamp` 等属性控制显示的行数并添加省略号: ```css .ellipsis-multi-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 控制显示的最大行数 */ overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; } ``` 通过以上这些 CSS 样式,可以根据实际需求选择合适的属性组合来处理内容超出容器宽度时的自动换行问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值