测试：修订间差异

来自SOKA CAFE
可视化wikitext
小
小
第20行： 第20行：
         }
         }


        /* 响应式容器：手机100%，平板/电脑60% */
         .video-card-container {
         .video-card-container {
             width: 100%;
             width: 100%;
             max-width: 60vw;
             max-width: 60vw; /* 默认电脑/平板宽度 */
             margin: 0 auto;
             margin: 0 auto;
         }
         }


         @media (max-width: 768px) {
         @media (max-width: 768px) {
            body {
                padding: 12px;
            }
             .video-card-container {
             .video-card-container {
                 max-width: 100% !important;
                 max-width: 100% !important; /* 手机强制100% */
                 padding: 0 8px;
                 padding: 0 8px; /* 避免贴边 */
                margin: 0;
             }
             }
         }
         }


        /* 卡片主体 */
         .video-card {
         .video-card {
             background: white;
             background: white;
第45行： 第43行：
         }
         }


        /* B站视频容器（16:9比例） */
         .bilibili-container {
         .bilibili-container {
             position: relative;
             position: relative;
             width: 100%;
             width: 100%;
             padding-top: 56.25%;
             padding-top: 56.25%; /* 16:9 */
             background: #000;
             background: #000;
             border-radius: 16px 16px 0 0;
             border-radius: 16px 16px 0 0;
第63行： 第62行：
         }
         }


        /* 底部信息区 */
         .info-section {
         .info-section {
             padding: 18px;
             padding: 18px;
第99行： 第99行：
         }
         }


        /* 详情页按钮改为链接 */
         .detail-link {
         .detail-link {
             background: linear-gradient(120deg, #ff4d85, #ff6b6b);
             background: linear-gradient(120deg, #ff4d85, #ff6b6b);
             color: #ffffff !important;
             color: white;
             text-decoration: none;
             text-decoration: none;
             border-radius: 20px;
             border-radius: 20px;
第110行： 第111行：
             transition: all 0.2s;
             transition: all 0.2s;
             box-shadow: 0 2px 6px rgba(255, 77, 133, 0.3);
             box-shadow: 0 2px 6px rgba(255, 77, 133, 0.3);
            -webkit-text-fill-color: #ffffff !important;
            text-fill-color: #ffffff !important;
         }
         }


第119行： 第118行：
         }
         }


        /* 修复后的标题样式 */
         .title {
         .title {
            width: 100%; /* 强制独占一行 */
            flex-shrink: 0; /* 防止被挤压 */
             font-size: 17px;
             font-size: 17px;
             font-weight: 700;
             font-weight: 700;
第128行： 第124行：
             line-height: 1.5;
             line-height: 1.5;
             margin-bottom: 10px;
             margin-bottom: 10px;
            /* --- 关键修复代码 --- */
             word-break: break-word;
            overflow-wrap: break-word; /* 推荐标准属性 */
             word-break: break-word;   /* 兼容旧版浏览器 */
            /* --- 关键修复代码 --- */
         }
         }


第154行： 第147行：
             font-size: 12px;
             font-size: 12px;
             white-space: nowrap;
             white-space: nowrap;
            text-decoration: none;
        }
        .tag:hover {
            background: #e6e8eb;
         }
         }
     </style>
     </style>
第165行： 第153行：
     <div class="video-card-container">
     <div class="video-card-container">
         <div class="video-card">
         <div class="video-card">
            <!-- B站视频嵌入（修正BV号格式） -->
             <div class="bilibili-container">
             <div class="bilibili-container">
                 <iframe  
                 <iframe  
                     src="https://player.bilibili.com/player.html?bvid=BV1Qs411q7Qz&page=1&autoplay=0"  
                     src="https://player.bilibili.com/player.html?bvid=BV1eXSMYVEcc&page=1&autoplay=0"  
                     allow="autoplay; fullscreen; picture-in-picture"  
                     allow="autoplay; fullscreen; picture-in-picture"  
                     allowfullscreen>
                     allowfullscreen>
第179行： 第168行：
                         <span class="username">H娘</span>
                         <span class="username">H娘</span>
                     </div>
                     </div>
                     <a href="https://www.bilibili.com/video/BV1Qs411q7Qz"  
                    <!-- 详情页跳转链接（修正BV号） -->
                     <a href="https://www.bilibili.com/video/BV1eXSMYVEcc"  
                       target="_blank"  
                       target="_blank"  
                       rel="noopener noreferrer"  
                       rel="noopener noreferrer"  
第187行： 第177行：
                 </div>
                 </div>


                <!-- 测试长标题 -->
                 <div class="title">【创价】久本五月病 【久本信仰祭16】</div>
                 <div class="title">【创价】久本五月病 【久本信仰祭16】这是一个非常非常长的标题用来测试修复效果哈哈哈</div>
                  
                  
                 <div class="metadata">
                 <div class="metadata">
第195行： 第184行：
                  
                  
                 <div class="tags">
                 <div class="tags">
                     <a href="/wiki/宗教都市祭" class="tag">宗教都市祭</a>
                     <span class="tag">宗教都市祭</span>
                     <a href="/wiki/久本投稿祭'25" class="tag">久本投稿祭'25</a>
                     <span class="tag">久本投稿祭'25</span>
                     <a href="/wiki/エア本" class="tag">エア本</a>
                     <span class="tag">エア本</span>
                 </div>
                 </div>
             </div>
             </div>

2026年3月19日 (四) 18:53的版本

<!DOCTYPE html> B站视频卡片

【创价】久本五月病 【久本信仰祭16】
sm16495736  •  2016年5月3日 00:06 (UTC+9)
宗教都市祭 久本投稿祭'25 エア本

取自“https://soka.cafe/index.php?title=测试&oldid=3256”