@@ -2501,4 +2501,206 @@ li #reply-title {
2501
2501
height : 1px ;
2502
2502
border : none;
2503
2503
/*border-top: 1px dashed #f5d6d6;*/
2504
+ }
2505
+
2506
+ /* =============================================================================
2507
+ 评论内容溢出修复样式
2508
+ 解决代码块和长文本撑开页面布局的问题
2509
+ ============================================================================= */
2510
+
2511
+ /* 评论容器基础样式 */
2512
+ .comment-body {
2513
+ overflow-wrap : break-word;
2514
+ word-wrap : break-word;
2515
+ word-break : break-word;
2516
+ max-width : 100% ;
2517
+ box-sizing : border-box;
2518
+ }
2519
+
2520
+ /* 修复评论中的代码块溢出 */
2521
+ .comment-content pre ,
2522
+ .comment-body pre {
2523
+ white-space : pre-wrap !important ;
2524
+ word-wrap : break-word !important ;
2525
+ overflow-wrap : break-word !important ;
2526
+ max-width : 100% !important ;
2527
+ overflow-x : auto;
2528
+ padding : 10px ;
2529
+ background-color : # f8f8f8 ;
2530
+ border : 1px solid # ddd ;
2531
+ border-radius : 4px ;
2532
+ font-size : 12px ;
2533
+ line-height : 1.4 ;
2534
+ margin : 10px 0 ;
2535
+ }
2536
+
2537
+ /* 修复评论中的行内代码 */
2538
+ .comment-content code ,
2539
+ .comment-body code {
2540
+ word-wrap : break-word !important ;
2541
+ overflow-wrap : break-word !important ;
2542
+ white-space : pre-wrap;
2543
+ max-width : 100% ;
2544
+ display : inline-block;
2545
+ vertical-align : top;
2546
+ }
2547
+
2548
+ /* 修复评论中的长链接 */
2549
+ .comment-content a ,
2550
+ .comment-body a {
2551
+ word-wrap : break-word !important ;
2552
+ overflow-wrap : break-word !important ;
2553
+ word-break : break-all;
2554
+ max-width : 100% ;
2555
+ }
2556
+
2557
+ /* 修复评论段落 */
2558
+ .comment-content p ,
2559
+ .comment-body p {
2560
+ word-wrap : break-word !important ;
2561
+ overflow-wrap : break-word !important ;
2562
+ max-width : 100% ;
2563
+ margin : 10px 0 ;
2564
+ }
2565
+
2566
+ /* 特殊处理代码高亮块 - 关键修复! */
2567
+ .comment-content .codehilite ,
2568
+ .comment-body .codehilite {
2569
+ max-width : 100% !important ;
2570
+ overflow-x : auto;
2571
+ margin : 10px 0 ;
2572
+ background : # f8f8f8 !important ;
2573
+ border : 1px solid # ddd ;
2574
+ border-radius : 4px ;
2575
+ padding : 10px ;
2576
+ font-size : 12px ;
2577
+ line-height : 1.4 ;
2578
+ /* 关键:防止内容撑开容器 */
2579
+ width : 100% ;
2580
+ box-sizing : border-box;
2581
+ display : block;
2582
+ }
2583
+
2584
+ .comment-content .codehilite pre ,
2585
+ .comment-body .codehilite pre {
2586
+ white-space : pre-wrap !important ;
2587
+ word-wrap : break-word !important ;
2588
+ overflow-wrap : break-word !important ;
2589
+ margin : 0 !important ;
2590
+ padding : 0 !important ;
2591
+ background : transparent !important ;
2592
+ border : none !important ;
2593
+ font-size : inherit;
2594
+ line-height : inherit;
2595
+ /* 确保pre标签不会超出父容器 */
2596
+ max-width : 100% ;
2597
+ width : 100% ;
2598
+ box-sizing : border-box;
2599
+ }
2600
+
2601
+ /* 修复代码高亮中的span标签 */
2602
+ .comment-content .codehilite span ,
2603
+ .comment-body .codehilite span {
2604
+ word-wrap : break-word !important ;
2605
+ overflow-wrap : break-word !important ;
2606
+ /* 防止行内元素导致的溢出 */
2607
+ display : inline;
2608
+ max-width : 100% ;
2609
+ }
2610
+
2611
+ /* 针对特定的代码高亮类 */
2612
+ .comment-content .codehilite .kt ,
2613
+ .comment-content .codehilite .nf ,
2614
+ .comment-content .codehilite .n ,
2615
+ .comment-content .codehilite .p ,
2616
+ .comment-content .codehilite .w ,
2617
+ .comment-content .codehilite .o ,
2618
+ .comment-body .codehilite .kt ,
2619
+ .comment-body .codehilite .nf ,
2620
+ .comment-body .codehilite .n ,
2621
+ .comment-body .codehilite .p ,
2622
+ .comment-body .codehilite .w ,
2623
+ .comment-body .codehilite .o {
2624
+ word-break : break-all;
2625
+ overflow-wrap : break-word;
2626
+ }
2627
+
2628
+ /* 修复评论列表项 */
2629
+ .commentlist li {
2630
+ max-width : 100% ;
2631
+ overflow : hidden;
2632
+ box-sizing : border-box;
2633
+ }
2634
+
2635
+ /* 确保评论内容不超出容器 */
2636
+ .commentlist .comment-body {
2637
+ max-width : calc (100% - 20px ); /* 留出一些边距 */
2638
+ margin-left : 10px ;
2639
+ margin-right : 10px ;
2640
+ overflow : hidden; /* 防止内容溢出 */
2641
+ word-wrap : break-word;
2642
+ }
2643
+
2644
+ /* 重要:限制评论列表项的最大宽度 */
2645
+ .commentlist li [style *= "margin-left" ] {
2646
+ max-width : calc (100% - 2rem ) !important ;
2647
+ overflow : hidden;
2648
+ box-sizing : border-box;
2649
+ }
2650
+
2651
+ /* 特别处理深层嵌套的评论 */
2652
+ .commentlist li [style *= "margin-left: 3rem" ],
2653
+ .commentlist li [style *= "margin-left: 6rem" ],
2654
+ .commentlist li [style *= "margin-left: 9rem" ] {
2655
+ max-width : calc (100% - 1rem ) !important ;
2656
+ }
2657
+
2658
+ /* 移动端优化 */
2659
+ @media (max-width : 768px ) {
2660
+ .comment-content pre ,
2661
+ .comment-body pre {
2662
+ font-size : 11px ;
2663
+ padding : 8px ;
2664
+ margin : 8px 0 ;
2665
+ }
2666
+
2667
+ .commentlist .comment-body {
2668
+ max-width : calc (100% - 10px );
2669
+ margin-left : 5px ;
2670
+ margin-right : 5px ;
2671
+ }
2672
+
2673
+ /* 移动端评论缩进调整 */
2674
+ .commentlist li [style *= "margin-left" ] {
2675
+ margin-left : 1rem !important ;
2676
+ max-margin-left : 2rem !important ;
2677
+ }
2678
+ }
2679
+
2680
+ /* 防止表格溢出 */
2681
+ .comment-content table ,
2682
+ .comment-body table {
2683
+ max-width : 100% ;
2684
+ overflow-x : auto;
2685
+ display : block;
2686
+ white-space : nowrap;
2687
+ }
2688
+
2689
+ /* 修复图片溢出 */
2690
+ .comment-content img ,
2691
+ .comment-body img {
2692
+ max-width : 100% !important ;
2693
+ height : auto !important ;
2694
+ }
2695
+
2696
+ /* 修复引用块 */
2697
+ .comment-content blockquote ,
2698
+ .comment-body blockquote {
2699
+ max-width : 100% ;
2700
+ overflow-wrap : break-word;
2701
+ word-wrap : break-word;
2702
+ padding : 10px 15px ;
2703
+ margin : 10px 0 ;
2704
+ border-left : 4px solid # ddd ;
2705
+ background-color : # f9f9f9 ;
2504
2706
}
0 commit comments