修正著作頁面文字溢出問題

app/collect/index.js

@@ -1,62 +1,61 @@
 function collect_load(begin = 0) {
-	$.get(
-		"list.php",
-		{
-			begin: begin,
-		},
-		function (data, status) {
-			let arrCollectList = JSON.parse(data);
-			let html = "";
-			for (const iterator of arrCollectList.data) {
-				html += "<div class='card collect_card'>";
-				html += "<div class='card_state'>" + gLocal.gui.ongoing + "</div>";
-				html += "<div class='card_info'>"; //卡片信息开始
-				html += "<div class='collect_title'>";
-				html += "<a href='../article/?collect=" + iterator.id + "'>" + iterator.title + "</a>";
-				html += "</div>";
+    $.get(
+        "list.php", {
+            begin: begin,
+        },
+        function(data, status) {
+            let arrCollectList = JSON.parse(data);
+            let html = "";
+            for (const iterator of arrCollectList.data) {
+                html += "<div class='card collect_card'>";
+                html += "<div class='card_state'>" + gLocal.gui.ongoing + "</div>";
+                html += "<div class='card_info'>"; //卡片信息开始
+                html += "<div class='collect_title'>";
+                html += "<a href='../article/?collect=" + iterator.id + "'>" + iterator.title + "</a>";
+                html += "</div>";
 
-				if (iterator.subtitle && iterator.subtitle != "null") {
-					html += "<div class='subtitle'>" + iterator.subtitle + "</div>";
-				}
-				if (iterator.summary && iterator.summary != "null") {
-					html += "<div class='summary'>" + iterator.summary + "</div>";
-				}
-				if (iterator.tag) {
-					html += "<div style='overflow-wrap: anywhere;'>" + iterator.tag + "</div>";
-				}
-				html += "<div style='margin-top:10px'>" + iterator.username.nickname + "</div>";
+                if (iterator.subtitle && iterator.subtitle != "null") {
+                    html += "<div class='subtitle'>" + iterator.subtitle + "</div>";
+                }
+                if (iterator.summary && iterator.summary != "null") {
+                    html += "<div class='summary'>" + iterator.summary + "</div>";
+                }
+                if (iterator.tag) {
+                    html += "<div style='overflow-wrap: anywhere;'>" + iterator.tag + "</div>";
+                }
+                html += "<div style='margin-top:10px'>" + iterator.username.nickname + "</div>";
 
-				html += "</div>"; //卡片信息关闭
-				const article_limit = 4;
-				let article_count = 0;
-				let article_list = JSON.parse(iterator.article_list);
-				//章节预览链接
-				html += "<div class='article_title_link' >";
+                html += "</div>"; //卡片信息关闭
+                const article_limit = 4;
+                let article_count = 0;
+                let article_list = JSON.parse(iterator.article_list);
+                //章节预览链接
+                html += "<div class='article_title_list' >";
 
-				//!!!!!!請加上不同語言！！！！！
-				html += "<div style='font-weight:700;'>" + gLocal.gui.content + "</div>";
+                //!!!!!!請加上不同語言！！！！！
+                html += "<div style='font-weight:700;'>" + gLocal.gui.content + "</div>";
 
-				//章節列表
-				html += "<div>";
-				for (const article of article_list) {
-					html += "<div style='border-top: #707070 1px solid; text-overflow: ellipsis; line-height:2.2em;'>";
-					html +=
-						"<a style='color:var(--main_color);font-weight:700;' href='../article/?id=" +
-						article.article +
-						"' target='_blank'>" +
-						article.title +
-						"</a>";
-					html += "</div>";
-					article_count++;
-					if (article_count > article_limit) {
-						break;
-					}
-				}
-				html += "</div>"; //章節列表結束
-				html += "</div>"; //章节预览链接结束
-				html += "</div>"; //card内容 结束
-			}
-			$("#book_list").html(html);
-		}
-	);
-}
+                //章節列表
+                html += "<div>";
+                for (const article of article_list) {
+                    html += "<div style='padding:6px 0; border-top: #707070 1px solid;'>";
+                    html +=
+                        "<a class='article_title' style='color:var(--main_color);font-weight:700;' href='../article/?id=" +
+                        article.article +
+                        "' target='_blank'>" +
+                        article.title +
+                        "</a>";
+                    html += "</div>";
+                    article_count++;
+                    if (article_count > article_limit) {
+                        break;
+                    }
+                }
+                html += "</div>"; //章節列表結束
+                html += "</div>"; //章节预览链接结束
+                html += "</div>"; //card内容 结束
+            }
+            $("#book_list").html(html);
+        }
+    );
+}

app/collect/index.php

@@ -80,7 +80,7 @@ include "../pcdl/html_head.php";
             fill: var(--btn-bg-color);
         }
 
-        .article_title_link {
+        .article_title_list {
             margin-top: 18px;
             display: grid;
             grid-template-columns: 80px auto;
@@ -151,6 +151,14 @@ include "../pcdl/html_head.php";
             padding: 3px 6px;
             margin: 0 5px 5px 0;
         }
+
+        .article_title {
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            -webkit-line-clamp: 2;
+        }
     </style>
     <style media="screen and (min-width:800px)">
         .collect_section .section_inner {
@@ -206,7 +214,7 @@ include "../pcdl/html_head.php";
     <div id='course_head_bar' class='collect_head_bar'>
         <div class='section_inner'>
             <h1>著作</h1>
-            <div style='width:30em'>各種從經典中擷取的文章，所彙集成的文，其中有多人翻譯的篇章等等的各種。</div>
+            <div style='max-width:30em'>各種從經典中擷取的文章，所彙集成的文，其中有多人翻譯的篇章等等的各種。</div>
             <!--
             <div id="main_tag">
                 <span tag="vinaya">sīla</span>
@@ -220,7 +228,7 @@ include "../pcdl/html_head.php";
 
     <div class="search_section">
         <div style='font-size:140%;'>
-            <span style="display:inline-block;width:20em;"><input type="input" placeholder=<?php echo $_local->gui->search . '：' . $_local->gui->title . '&nbsp;OR&nbsp;' . $_local->gui->author; ?> style="background-color:var(--new-tool-input-text-bg); border:solid 1px var(--new-tool-btn-border)" /></span>
+            <span style="display:inline-block;max-width:20em;"><input type="input" placeholder=<?php echo $_local->gui->search . '：' . $_local->gui->title . '&nbsp;OR&nbsp;' . $_local->gui->author; ?> style="background-color:var(--new-tool-input-text-bg); border:solid 1px var(--new-tool-btn-border)" /></span>
             <button class="icon_btn">
                 <svg class="icon">
                     <use xlink:href="../studio/svg/icon.svg#ic_search"></use>
@@ -234,7 +242,7 @@ include "../pcdl/html_head.php";
             <div class="left_content">
                 <div style="display:flex;">
                     <h2 style="margin-right:auto">
-                        <?php echo $_local->gui->composition;?>
+                        <?php echo $_local->gui->composition; ?>
                     </h2>
                     <div level="7" class="tag_others" style="padding-bottom:5px; margin-right:5px;">
                         <select>