1
This commit is contained in:
@@ -173,28 +173,68 @@
|
|||||||
}, 300);
|
}, 300);
|
||||||
});
|
});
|
||||||
// 英文单词截断
|
// 英文单词截断
|
||||||
// 1. 基础CSS保证(必须)
|
// 1. 基础处理函数
|
||||||
$('.ql-editor').css({
|
function processTextNodes($element) {
|
||||||
'word-break': 'normal',
|
$element.contents().each(function() {
|
||||||
'overflow-wrap': 'anywhere',
|
if (this.nodeType === 3) { // 文本节点
|
||||||
'overflow-x': 'hidden'
|
const text = this.nodeValue.trim();
|
||||||
});
|
if (text) {
|
||||||
|
$(this).replaceWith(
|
||||||
// 2. 智能处理文本节点
|
$('<span>').addClass('word-wrapper').text(text)
|
||||||
$('.ql-editor').contents().each(function() {
|
);
|
||||||
if (this.nodeType === 3) { // 只处理文本节点
|
}
|
||||||
const $wrapper = $('<span>').addClass('word-wrapper');
|
} else if (this.nodeType === 1 && !$(this).is('br, img, a')) { // 元素节点(非换行/图片/链接)
|
||||||
$(this).replaceWith($wrapper.text(this.nodeValue));
|
processTextNodes($(this));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 3. 处理长单词(10个字符以上)
|
// 2. 智能断词处理
|
||||||
$('.word-wrapper').html(function(_, html) {
|
function smartWordBreak(html) {
|
||||||
return html.replace(/([a-zA-Z]{10,})/g, function(match) {
|
return html
|
||||||
return match.replace(/([a-z])([A-Z])/g, '$1<wbr>$2')
|
// 处理超长单词(15字符以上)
|
||||||
.replace(/(.{5})/g, '$1<wbr>');
|
.replace(/([a-zA-Z]{15,})/g, function(match) {
|
||||||
|
return match
|
||||||
|
.replace(/([a-z])([A-Z])/g, '$1<wbr>$2') // 驼峰分词
|
||||||
|
.replace(/([_-])/g, '$1<wbr>') // 连接符分词
|
||||||
|
.replace(/(.{8})/g, '$1<wbr>'); // 每8字符分词
|
||||||
|
})
|
||||||
|
// 保护常见复合词
|
||||||
|
.replace(/(launch parameters|featured apps)/gi, function(match) {
|
||||||
|
return match.replace(/\s/g, '<wbr> ');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 执行处理
|
||||||
|
const $editor = $('.ql-editor');
|
||||||
|
|
||||||
|
// 先处理文本节点
|
||||||
|
processTextNodes($editor);
|
||||||
|
|
||||||
|
// 再处理所有.word-wrapper
|
||||||
|
$('.word-wrapper').each(function() {
|
||||||
|
const $this = $(this);
|
||||||
|
$this.html(smartWordBreak($this.text()));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. 监听动态内容变化(适用于富文本编辑器)
|
||||||
|
if (typeof MutationObserver !== 'undefined') {
|
||||||
|
const observer = new MutationObserver(function(mutations) {
|
||||||
|
mutations.forEach(function(mutation) {
|
||||||
|
$(mutation.addedNodes).each(function() {
|
||||||
|
processTextNodes($(this));
|
||||||
|
$('.word-wrapper', this).each(function() {
|
||||||
|
$(this).html(smartWordBreak($(this).text()));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe($editor[0], {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
{/block}
|
{/block}
|
||||||
@@ -155,7 +155,18 @@ body {
|
|||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
-moz-tab-size: 4;
|
-moz-tab-size: 4;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
word-wrap: normal;
|
/* 换行控制 */
|
||||||
|
word-wrap: break-word; /* 兼容旧浏览器 */
|
||||||
|
overflow-wrap: break-word; /* 现代浏览器标准 */
|
||||||
|
word-break: normal; /* 保持单词完整 */
|
||||||
|
|
||||||
|
/* 排版优化 */
|
||||||
|
white-space: normal;
|
||||||
|
hyphens: manual; /* 禁用自动连字符 */
|
||||||
|
|
||||||
|
/* 容器约束 */
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
|
||||||
}
|
}
|
||||||
.word-wrapper {
|
.word-wrapper {
|
||||||
@@ -172,8 +183,21 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
word-break: normal;
|
||||||
|
overflow-wrap: anywhere; /* 更智能的换行方式 */
|
||||||
|
display: inline-block; /* 创建换行上下文 */
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
/* 移动端优化 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.narshelpCenterdetail-app .nhlp-app-content {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
.ql-editor p,
|
||||||
|
.ql-editor li {
|
||||||
|
display: block; /* 移动端改用块级布局 */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-editor ol,.ql-editor ul {
|
.ql-editor ol,.ql-editor ul {
|
||||||
padding-left: 1.5em
|
padding-left: 1.5em
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,9 +40,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.narshelpCenterdetail-app .nhlp-app-content {
|
.narshelpCenterdetail-app .nhlp-app-content {
|
||||||
margin: 1rem;
|
/* margin: 1rem; */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-top: 9.2vh;
|
margin-top: 9.2vh;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.narshelpCenterdetail-app #rendered-content img {
|
.narshelpCenterdetail-app #rendered-content img {
|
||||||
|
|||||||
Reference in New Issue
Block a user