diff --git a/apollo-portal/src/main/resources/static/config/diff.html b/apollo-portal/src/main/resources/static/config/diff.html
index bbfc3098ee5..0bd2adb8922 100644
--- a/apollo-portal/src/main/resources/static/config/diff.html
+++ b/apollo-portal/src/main/resources/static/config/diff.html
@@ -127,10 +127,11 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                                 </label>
                             </div>
                             <div class="col-sm-12 diff-content">
-                                <table class="table table-bordered table-striped table-hover" ng-show="isTableDiff">
-                                    <thead>
+                                <!--表格对比 properties mode-->
+                                <table class="table table-bordered table-striped table-hover table-fixed" ng-show="isTableDiff">
+                                <thead>
                                         <tr>
-                                            <td>Key</td>
+                                            <td width="10%">Key</td>
                                             <td ng-repeat="cluster in syncData.syncToNamespaces">
                                                 Value ( {{'Common.Environment' | translate }} : <label ng-bind="cluster.env"></label> , {{'Common.Cluster' | translate }} : <label ng-bind="cluster.clusterName"></label> )
                                             </td>
@@ -142,16 +143,24 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                                     <tbody>
                                         <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey" ng-if="(searchKey === '' || key.indexOf(searchKey) !== -1 ) && (!onlyShowDiffKeys || (onlyShowDiffKeys && !allNamespaceValueEqualed[key]))">
                                             <td width="15%" ng-bind="key"></td>
-                                            <td ng-repeat="cluster in syncData.syncToNamespaces"
-                                                ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).value">
+                                            <td ng-bind="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"></td>
+                                            <td ng-repeat="cluster in syncData.syncToNamespaces.slice(1)">
+                                                <span ng-if="itemsKeyedByCluster[cluster.compositedKey]" >
+                                                    <apollodiff  old-str="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"
+                                                                 new-str="(itemsKeyedByCluster[cluster.compositedKey] || {}).value"
+                                                                 apollo-id="'clusterDiff:' + key + ':' + cluster.compositedKey">
+                                                    </apollodiff>
+                                                </span>
                                             </td>
                                             <td ng-show="showCommentDiff"
                                                 ng-repeat="cluster in syncData.syncToNamespaces"
-                                                ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).comment">
+                                                ng-bind="(itemsKeyedByCluster[cluster.compositedKey] || {}).comment">
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
+
+                                <!--纯文本对比 text mode-->
                                 <apollodiff  ng-show="!isTableDiff" old-str="syncData.syncToNamespaces[0].originTextInfo"
                                              new-str="syncData.syncToNamespaces[1].originTextInfo" apollo-id="'releaseStrDiff'">
                                 </apollodiff>
diff --git a/apollo-portal/src/main/resources/static/config/history.html b/apollo-portal/src/main/resources/static/config/history.html
index 9c7d46e7727..cf6d0420e0e 100644
--- a/apollo-portal/src/main/resources/static/config/history.html
+++ b/apollo-portal/src/main/resources/static/config/history.html
@@ -157,11 +157,11 @@ <h6 class="col-md-5 text-right" ng-bind="releaseHistory.releaseTimeFormatted"></
                         <section ng-show="history.viewType=='diff'">
                             <h4 class="section-title">{{'Config.History.ChangedItem' | translate }}</h4>
                             <div ng-show="history.changes && history.changes.length > 0">
-                                <table class="no-margin table table-striped table-hover table-bordered">
+                                <table class="no-margin table table-striped table-hover table-bordered table-fixed">
                                     <thead>
                                         <tr>
-                                            <th>{{'Config.History.ChangeType' | translate }}</th>
-                                            <th>{{'Config.History.ChangeKey' | translate }}</th>
+                                            <th width="10%">{{'Config.History.ChangeType' | translate }}</th>
+                                            <th width="12%">{{'Config.History.ChangeKey' | translate }}</th>
                                             <th>{{'Config.History.ChangeOldValue' | translate }}</th>
                                             <th>{{'Config.History.ChangeNewValue' | translate }}</th>
                                         </tr>
@@ -188,11 +188,14 @@ <h4 class="section-title">{{'Config.History.ChangedItem' | translate }}</h4>
                                                 <span
                                                     ng-bind="change.entity.firstEntity.value.length > 250 ? '...' :''"></span>
                                             </td>
-                                            <td class="cursor-pointer" width="35%"
+                                            <td class="cursor-pointer left-overflow" width="35%"
                                                 ng-click="showText(change.entity.secondEntity.value)">
-                                                <span ng-bind="change.entity.secondEntity.value | limitTo: 250"></span>
-                                                <span
-                                                    ng-bind="change.entity.secondEntity.value.length > 250 ? '...' :''"></span>
+                                                <span>
+                                                    <apollodiff  old-str="change.entity.firstEntity.value"
+                                                                 new-str="change.entity.secondEntity.value"
+                                                                 apollo-id="'diff:' + change.entity.firstEntity.key">
+                                                    </apollodiff>
+                                                </span>
                                             </td>
                                         </tr>
                                     </tbody>
diff --git a/apollo-portal/src/main/resources/static/i18n/zh-CN.json b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
index 8ae676eda59..f9f82e28dfe 100644
--- a/apollo-portal/src/main/resources/static/i18n/zh-CN.json
+++ b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
@@ -291,10 +291,10 @@
   "Component.Publish.ToSeeChange": "查看变更",
   "Component.Publish.CompareWithMasterValue": "与主版本对比",
   "Component.Publish.CompareWithPublishedValue": "与已发布对比",
-  "Component.Publish.PublishedValue": "待发布的值",
-  "Component.Publish.Changes": "Changes",
+  "Component.Publish.PublishedValue": "已发布的值",
+  "Component.Publish.Changes": "改动",
   "Component.Publish.Key": "Key",
-  "Component.Publish.NoPublishedValue": "未发布的值",
+  "Component.Publish.NoPublishedValue": "待发布的值",
   "Component.Publish.ModifyUser": "修改人",
   "Component.Publish.ModifyTime": "修改时间",
   "Component.Publish.NewAdded": "新",
@@ -310,8 +310,8 @@
   "Component.Publish.ItemNoChange": "配置没有变化",
   "Component.Publish.GrayItemNoChange": "灰度配置没有变化",
   "Component.Publish.NoGrayItems": "没有灰度的配置项",
-  "Component.Publish.Release": "Release Name",
-  "Component.Publish.ReleaseComment": "Comment",
+  "Component.Publish.Release": "版本名称",
+  "Component.Publish.ReleaseComment": "说明",
   "Component.Publish.OpPublish": "发布",
   "Component.Rollback.To": "回滚到",
   "Component.Rollback.Tips": "此操作将会回滚到上一个发布版本，且当前版本作废，但不影响正在修改的配置。可在发布历史页面查看当前生效的版本",
@@ -731,11 +731,11 @@
   "Config.History.ChangedItemTips": "查看此次发布与上次版本的变更",
   "Config.History.AllItem": "全部配置",
   "Config.History.AllItemTips": "查看此次发布的所有配置信息",
-  "Config.History.ChangeType": "Type",
+  "Config.History.ChangeType": "类型",
   "Config.History.ChangeKey": "Key",
-  "Config.History.ChangeValue": "Value",
-  "Config.History.ChangeOldValue": "Old Value",
-  "Config.History.ChangeNewValue": "New Value",
+  "Config.History.ChangeValue": "值",
+  "Config.History.ChangeOldValue": "旧值",
+  "Config.History.ChangeNewValue": "新值",
   "Config.History.ChangeTypeNew": "新增",
   "Config.History.ChangeTypeModify": "修改",
   "Config.History.ChangeTypeDelete": "删除",
diff --git a/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
index 488169ac3c0..7354ac670cb 100644
--- a/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
+++ b/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
@@ -164,17 +164,19 @@ diff_item_module.controller("DiffItemController",
             function parseSyncSourceData() {
                 var syncData = {
                     syncToNamespaces: [],
-                    syncItems: []
+                    syncItems: [],
+                    firstClusterKey: "",
                 };
                 var namespaceName = $scope.pageContext.namespaceName;
                 selectedClusters.forEach(function (cluster) {
                     if (cluster.checked) {
                         cluster.clusterName = cluster.name;
                         cluster.namespaceName = namespaceName;
+                        cluster.compositedKey = cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName;
                         syncData.syncToNamespaces.push(cluster);
                     }
                 });
-
+                syncData.firstClusterKey = selectedClusters[0].compositedKey;
                 return syncData;
             }
 
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/diff-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/diff-directive.js
index b78525faf81..b9cdc7aaa2b 100644
--- a/apollo-portal/src/main/resources/static/scripts/directive/diff-directive.js
+++ b/apollo-portal/src/main/resources/static/scripts/directive/diff-directive.js
@@ -60,6 +60,7 @@ directive_module.directive('apollodiff',
                             part.removed ? 'red' : 'grey';
                         span = document.createElement('span');
                         span.style.color = color;
+                        span.style.display = 'block';
                         pre = part.added ? '+' :
                             part.removed ? '-' : '';
                         span.appendChild(document.createTextNode(pre + part.value));
diff --git a/apollo-portal/src/main/resources/static/styles/common-style.css b/apollo-portal/src/main/resources/static/styles/common-style.css
index fe92365f48c..b396156c687 100644
--- a/apollo-portal/src/main/resources/static/styles/common-style.css
+++ b/apollo-portal/src/main/resources/static/styles/common-style.css
@@ -95,7 +95,7 @@ p, td, span {
     color: #797979;
 }
 
-pre, .pre {
+pre {
     white-space: pre-wrap; /* Since CSS 2.1 */
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
     white-space: -pre-wrap; /* Opera 4-6 */
@@ -103,6 +103,10 @@ pre, .pre {
     word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
 
+.pre {
+    white-space: pre;
+}
+
 .hover:hover {
     background: #f5f5f5;
     cursor: pointer
@@ -1172,4 +1176,13 @@ table th {
 #consumer-list .create-btn img {
     width: 16px;
     height: 16px;
+}
+
+.left-overflow {
+    overflow-x: auto;
+    text-align: left;
+}
+
+.table-fixed{
+    table-layout: fixed;
 }
\ No newline at end of file
diff --git a/apollo-portal/src/main/resources/static/views/component/diff.html b/apollo-portal/src/main/resources/static/views/component/diff.html
index 3e36e174add..0caebc37bd7 100644
--- a/apollo-portal/src/main/resources/static/views/component/diff.html
+++ b/apollo-portal/src/main/resources/static/views/component/diff.html
@@ -1,4 +1,4 @@
-<pre class="no-radius" id="{{apolloId}}">
+<pre class="no-radius pre" id="{{apolloId}}">
 <!--
   ~ Copyright 2024 Apollo Authors
   ~
diff --git a/apollo-portal/src/main/resources/static/views/component/release-modal.html b/apollo-portal/src/main/resources/static/views/component/release-modal.html
index bf968919b98..ce90ca7ea81 100644
--- a/apollo-portal/src/main/resources/static/views/component/release-modal.html
+++ b/apollo-portal/src/main/resources/static/views/component/release-modal.html
@@ -39,8 +39,8 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
             <div class="release modal-body">
 
                 <div class="form-group pre-scrollable">
-                    <div class="col-sm-2 control-label" ng-if="!toReleaseNamespace.isPropertiesFormat">
-                        <div class="btn-group-vertical">
+                    <div class="col-sm-2 control-label">
+                        <div class="btn-group-vertical" ng-if="!toReleaseNamespace.isPropertiesFormat || (toReleaseNamespace.isBranch && !toReleaseNamespace.mergeAndPublish)">
                             <div class="btn-group btn-group-xs" role="group">
                                 <button type="button" class="btn btn-default" ng-if="toReleaseNamespace.isBranch"
                                         ng-class="{active:releaseChangeViewType=='compareWithMasterValue'}"
@@ -56,9 +56,8 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                 </button>
                             </div>
                         </div>
+                        <label ng-if="toReleaseNamespace.isPropertiesFormat" style="display: block">{{'Component.Publish.Changes' | translate }}</label>
                     </div>
-                    <label class="col-sm-2 control-label"
-                        ng-if="toReleaseNamespace.isPropertiesFormat">{{'Component.Publish.Changes' | translate }}</label>
 
                     <div class="col-sm-10"
                         ng-if="(!toReleaseNamespace.isBranch && toReleaseNamespace.itemModifiedCnt)
@@ -68,7 +67,8 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
 
                         <!--properties format-->
                         <!--normal release-->
-                        <table class="table table-bordered table-striped text-center table-hover"
+                        <!--主版本发布-->
+                        <table class="table table-bordered table-striped text-center table-hover table-fixed"
                             ng-if="toReleaseNamespace.isPropertiesFormat && !toReleaseNamespace.isBranch">
                             <thead>
                                 <tr>
@@ -78,7 +78,7 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <th>
                                         {{'Component.Publish.PublishedValue' | translate }}
                                     </th>
-                                    <th>
+                                    <th width="40%">
                                         {{'Component.Publish.NoPublishedValue' | translate }}
                                     </th>
                                     <th>
@@ -108,8 +108,8 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <td width="25%" title="{{config.oldValue}}">
                                         <span ng-bind="config.oldValue"></span>
                                     </td>
-                                    <td width="25%" title="{{config.newValue}}">
-                                        <span ng-bind="config.newValue"></span>
+                                    <td width="25%" title="{{config.newValue}}" class="left-overflow">
+                                        <apollodiff old-str="config.oldValue" new-str="config.newValue" apollo-id="'unpublishedDiffPublished:'+config.item.key"></apollodiff>
                                     </td>
                                     <td width="15%" ng-bind="config.item.dataChangeLastModifiedBy">
                                     </td>
@@ -121,11 +121,12 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                         </table>
 
                         <!--branch gray release-->
-                        <table class="table table-bordered table-striped text-center table-hover" ng-if="toReleaseNamespace.isPropertiesFormat &&
+                        <!--灰度发布-->
+                        <table class="table table-bordered table-striped text-center table-hover table-fixed" ng-if="toReleaseNamespace.isPropertiesFormat &&
                                toReleaseNamespace.isBranch && !toReleaseNamespace.mergeAndPublish">
                             <thead>
                                 <tr>
-                                    <th>
+                                    <th width="12%">
                                         {{'Component.Publish.Key' | translate }}
                                     </th>
                                     <th>
@@ -137,10 +138,10 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <th>
                                         {{'Component.Publish.GrayNoPublishedValue' | translate }}
                                     </th>
-                                    <th>
+                                    <th width="10%">
                                         {{'Component.Publish.ModifyUser' | translate }}
                                     </th>
-                                    <th>
+                                    <th width="12%">
                                         {{'Component.Publish.ModifyTime' | translate }}
                                     </th>
                                 </tr>
@@ -159,8 +160,14 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <td width="20%" title="{{config.oldValue}}">
                                         <span ng-bind="config.oldValue"></span>
                                     </td>
-                                    <td width="20%" title="{{config.newValue}}">
-                                        <span ng-bind="config.newValue"></span>
+                                    <td width="20%" title="{{config.newValue}}" class="left-overflow">
+                                        <span ng-if="releaseChangeViewType=='compareWithMasterValue'">
+                                            <apollodiff old-str="config.masterReleaseValue" new-str="config.newValue" apollo-id="'grayDiffMaster:' + config.item.key"></apollodiff>
+                                        </span>
+                                        <span ng-if="releaseChangeViewType=='compareWithPublishedValue'">
+                                            <apollodiff old-str="config.oldValue" new-str="config.newValue" apollo-id="'grayDiffPublished:' + config.item.key"></apollodiff>
+                                        </span>
+                                        <span ng-if="releaseChangeViewType=='release'" ng-bind="config.newValue"></span>
                                     </td>
                                     <td width="10%" ng-bind="config.item.dataChangeLastModifiedBy">
                                     </td>
@@ -172,7 +179,8 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                         </table>
 
                         <!--branch updateAndPublish and publish-->
-                        <table class="table table-bordered table-striped text-center table-hover" ng-if="toReleaseNamespace.isPropertiesFormat &&
+                        <!--灰度推全-->
+                        <table class="table table-bordered table-striped text-center table-hover table-fixed" ng-if="toReleaseNamespace.isPropertiesFormat &&
                                toReleaseNamespace.isBranch && toReleaseNamespace.mergeAndPublish">
                             <thead>
                                 <tr>
@@ -182,7 +190,7 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <th ng-if="toReleaseNamespace.isBranch">
                                         {{'Component.Publish.MasterValue' | translate }}
                                     </th>
-                                    <th ng-if="toReleaseNamespace.isBranch && toReleaseNamespace.mergeAndPublish">
+                                    <th width="40%" ng-if="toReleaseNamespace.isBranch && toReleaseNamespace.mergeAndPublish">
                                         {{'Component.Publish.GrayValue' | translate }}
                                     </th>
                                     <th ng-if="!toReleaseNamespace.isBranch || !toReleaseNamespace.mergeAndPublish">
@@ -207,8 +215,8 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                                     <td width="25%" title="{{config.masterReleaseValue}}">
                                         <span ng-bind="config.masterReleaseValue"></span>
                                     </td>
-                                    <td width="25%" title="{{config.item.value}}">
-                                        <span ng-bind="config.item.value"></span>
+                                    <td width="25%" title="{{config.item.value}}" class="left-overflow">
+                                        <apollodiff old-str="config.masterReleaseValue" new-str="config.item.value" apollo-id="'grayDiffMasterReleased:' + config.item.key"></apollodiff>
                                     </td>
                                     <td width="15%" ng-bind="config.item.dataChangeLastModifiedBy">
                                     </td>