Widget:TextArticle

<widget> <style> .text-controls {

   margin-top: 10px;
   display: flex;
   gap: 20px;

}

.control-group {

   position: relative;
   display: inline-block;
   padding: 5px 15px;
   border: 2px solid #4a9fcc;
   background: #52b1e3;
   border-radius: 10px;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   cursor: pointer;
   transition: background 0.3s ease-in-out;

}

/* 桌面端：鼠标悬停展开 */ @media (hover: hover) {

   .control-group:hover .options {
       display: block;
   }

}

/* 选项菜单 */ .options {

   display: none;
   position: absolute;
   top: 110%;
   left: 50%;
   transform: translateX(-50%);
   background: #52b1e3;
   border: 2px solid #4a9fcc;
   border-radius: 10px;
   padding: 5px;
   min-width: 60px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 100;

}

/* 按钮样式 */ .text-btn {

   display: block;
   padding: 10px 5px;
   border: none;
   background: transparent;
   cursor: pointer;
   font-size: 14px;
   text-align: center;
   width: 100%;

}

.text-btn:hover {

   color: #fff;

}

/* 触屏版优化：点击展开菜单 */ .control-group.active .options {

   display: block;

} /* 正文内容 */ .text-article {

   white-space: pre-wrap;
   word-wrap: break-word;
   /*加 transition 让行间距、字号、字体变化时平滑 */
   transition: font-size 0.3s ease-in-out, 
               line-height 0.3s ease-in-out, 
               font-family 0.3s ease-in-out;

}

</style>

       行距

           正常
           宽松
           二倍

       字号

           小字
           中字
           大字

       字体

           默认
           楷体

<script> var nsize = 18; // 默认字号 var lineHeight = 1.8; // 默认行间距

// 预设字号映射 var fontSizeMap = {

   small: "14px",
   medium: "20px",
   large: "24px"

};

// 预设行间距映射 var lineHeightMap = {

   small: "1.5",
   medium: "1.8",
   large: "2.0"

};

// 设置字号 function setFontSize(size) {

   var article = document.getElementById("text-article");
   if (article) {
       article.style.setProperty("font-size", fontSizeMap[size], "important");

       // 强制内部子元素也跟随
       article.querySelectorAll("p, li, dl").forEach(el => {
           el.style.setProperty("font-size", fontSizeMap[size], "important");
       });
   }

}

// 设置行间距 function setLineHeight(line) {

   var article = document.getElementById("text-article");
   if (article) {
       article.style.lineHeight = lineHeightMap[line];
   }

}

// 设置字体 function setFont(font) {

   var article = document.getElementById("text-article");
   if (article) {
       if (font === "default") {
           article.style.fontFamily = 'sans-serif'; // 网页默认字体，如黑体
       } else if (font === "kai") {
           article.style.fontFamily = '"Times New Roman", "KaiTi", serif'; // 楷体 + Times New Roman
       }
   }

}

// 切换菜单展开/收起 function toggleMenu(element) {

   // 关闭所有其他菜单
   document.querySelectorAll(".control-group").forEach(function (group) {
       if (group !== element) {
           group.classList.remove("active");
       }
   });

   // 切换当前菜单
   element.classList.toggle("active");

}

// 关闭菜单（防止点击选项后立即关闭） function closeMenu(event) {

   event.stopPropagation(); // 阻止冒泡，防止点击按钮时菜单立即关闭
   setTimeout(() => {
       document.querySelectorAll(".control-group").forEach(group => group.classList.remove("active"));
   }, 150); // 延迟关闭，确保选项点击后生效

}

// 点击其他地方关闭菜单 document.addEventListener("click", function (event) {

   if (!event.target.closest(".control-group")) {
       document.querySelectorAll(".control-group").forEach(group => group.classList.remove("active"));
   }

});

</script> </widget>