CSS如何对文本内容进行换行

CSS换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示

代码部分:

 

一般的文字截断(适用于内联与块)

==============CSS================

 

.text-overflow{
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 

=================================

 

对于表格的话,定义有一点不一样:

==============CSS================ 

 

table{
width:30em;
table-layout:fixed;
}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 

=================================

 

注:这个东西只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。

### CSS实现富文本内容的自动换行或强制换行 #### 自动换行方案 在CSS中,可以使用`white-space`属性的不同值来控制文本换行行为。对于富文本内容的自动换行,推荐使用以下几种方式: 1. **`white-space: normal;`** 默认情况下,该属性允许文本在必要时自动换行。适用于大多数场景下的自然换行需求[^1]。 2. **`word-wrap: break-word;` 或 `overflow-wrap: break-word;`** 当遇到较长单词无法正常换行的情况,这两个属性能够强制将超出容器宽度的部分断开并换行[^3]。 3. **`word-break: break-all;`** 此属性主要用于处理连续无空格的内容(如URL地址),它可以强行打断字符序列以适应容器大小[^3]。 4. **表格布局中的文字折行** 使用固定表单布局(`table-layout: fixed`)配合单元格内的`word-break: break-all;`或者`word-wrap: break-word;`可以让表格内部的数据项按照指定列宽进行拆分显示。 #### 强制换行方案 如果希望某些特定位置必须执行手动换行,则可以直接嵌入HTML `<br>`标签至目标区域;不过这通常不依赖于纯CSS而是通过编写结构化标记完成操作[^1]。 另外,在展示来自`<textarea>`输入框转换后的数据到其他区块比如`.show-box`这类DIV当中时,为了保留原始的新行符`\n`作为视觉上的分行效果,应该设置其对应的样式规则如下所示: ```css .show-box { white-space: pre-line; } ``` 这里采用了`pre-line`模式,它会合并多余的空白并将每一段落间的多个换行压缩成单一间距的同时保持正常的段落间逻辑分割[^4]。 #### JavaScript辅助调整滚动条适配移动端编辑体验 针对iOS设备上可能出现由于软键盘遮挡而导致新插入行未能即时显现的问题,可通过监听文档的选择状态变化事件——即`selectionchange`—动态评估焦点处相对于可视窗口顶部的距离差额,并据此适时调用全局函数`window.scrollTo()`重新定位视图中心点从而改善交互流畅度[^5]。 ### 示例代码片段 以下是基于以上理论的一个综合实例演示如何结合前端技术妥善管理跨平台环境下的复杂多行字符串呈现问题: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>CSS文本换行示例</title> <style> .editor-container{ border: 1px solid black; padding: 1em; min-height: 10rem; resize: vertical; overflow-y: auto; display: block; font-family: monospace; line-height: 1.5; background-color: whitesmoke; } .output-area{ margin-top: 1em; border: dashed gray thin; padding: .5em; word-wrap: break-word; hyphens:auto;/* 可选 */ max-width: 30ch; text-align:left ; white-space: pre-wrap; } @media screen and (-webkit-min-device-pixel-ratio:0){ /* 特定IOS优化策略 */ body { touch-action:none;} } </style> </head> <body> <textarea class="editor-container" placeholder="请输入您的富文本..." oninput="updateOutput(this.value);"></textarea> <div id="livePreview" class="output-area">实时预览区...</div> <script> function updateOutput(contentString){ const previewDiv=document.getElementById('livePreview'); previewDiv.textContent='';// 清除旧内容以防重复渲染 let tempSpan=document.createElement('span'); tempSpan.style.visibility='hidden'; tempSpan.innerText='\uFEFF'+contentString+'\uFEFF'; // 防止首尾丢失特殊符号占位技巧 document.body.appendChild(tempSpan); try{ if (tempSpan.offsetHeight>previewDiv.clientHeight || /[\r\n]/g.test(contentString)){ previewDiv.classList.add('force-scrollable'); }else{ previewDiv.classList.remove('force-scrollable'); } }finally{ document.body.removeChild(tempSpan); } previewDiv.innerHTML=contentString.replace(/\n/g,'<br>'); } document.addEventListener('selectionchange',(evt)=>{ setTimeout(()=>{ adjustCaretVisibility(); },0); }); function adjustCaretVisibility(){ const selObj=getSelection(); if (!selObj.rangeCount||!selObj.anchorNode)return; const rangeClone=selObj.getRangeAt(0).cloneRange(); rangeClone.collapse(false); const dummyMarker=document.createDocumentFragment().appendChild(document.createElement('SPAN')); rangeClone.insertNode(dummyMarker); const caretPos=dummyMarker.getBoundingClientRect(); window.scrollBy({ top:(caretPos.bottom - Math.max(window.innerHeight*.7 ,dummyMarker.offsetTop)), behavior:'smooth' }); dummyMarker.parentNode&&dummyMarker.parentNode.removeChild(dummyMarker); } </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值