update：更新

src/model/panel-detail/panel-field.ts

@@ -64,6 +64,30 @@ export class PanelFieldModel extends PanelDetailModel {
      */
     public renderMode: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH' = 'TEXT';
 
+    /**
+     * 换行模式{WRAP：换行、 NOWRAP：不换行 }
+     *
+     * @type {(string | 'WRAP' | 'NOWRAP')}
+     * @memberof PanelFieldModel
+     */
+    public wrapMode: string | 'WRAP' | 'NOWRAP' = 'WRAP';
+
+    /**
+     * 文本垂直对齐模式{TOP：上对齐、 MIDDLE：居中、 BOTTOM：下对齐 }
+     *
+     * @type {(string | 'TOP' | 'MIDDLE' | 'BOTTOM')}
+     * @memberof PanelFieldModel
+     */
+    public vAlign: string | 'TOP' | 'MIDDLE' | 'BOTTOM' = 'MIDDLE';
+
+    /**
+     * 文本水平对齐模式{LEFT：左对齐、 CENTER：居中、 RIGHT：右对齐、 JUSTIFY：两端对齐 }
+     *
+     * @type {(string | 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFY')}
+     * @memberof PanelFieldModel
+     */
+    public hAlign: string | 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFY' = 'LEFT';
+
     /**
      * Creates an instance of PanelFieldModel.
      * PanelFieldModel 实例
@@ -78,6 +102,9 @@ export class PanelFieldModel extends PanelDetailModel {
         this.fieldState = opts.fieldState;
         this.dataItemName = opts.dataItemName;
         this.renderMode = opts.renderMode;
+        this.wrapMode = opts.wrapMode ? opts.wrapMode : 'WRAP';
+        this.vAlign = opts.vAlign ? opts.vAlign : 'MIDDLE';
+        this.hAlign = opts.hAlign ? opts.hAlign : 'LEFT';
     }
 
     /**
@@ -182,4 +209,75 @@ export class PanelFieldModel extends PanelDetailModel {
         this.data = null;
     }
 
+    /**
+     * 获取元素样式（直接内容元素，包含内容盒子 大小/边距/内容 的样式）
+     *
+     * @return {*} 
+     * @memberof PanelFieldModel
+     */
+    public getElementStyle() {
+        const elementStyle = {};
+        Object.assign(elementStyle, this.getBoxSizeStyle());
+        Object.assign(elementStyle, this.getBoxSpacingStyle());
+        Object.assign(elementStyle, this.getBoxContentStyle());
+        Object.assign(elementStyle, this.getBoxSelfAlignStyle());
+        return elementStyle;
+    }
+
+    /**
+     * 获取文本内容布局样式
+     *
+     * @protected
+     * @memberof PanelFieldModel
+     */
+    protected getBoxContentStyle() {
+        const contentStyle = {};
+        // 文本换行模式
+        if (this.wrapMode) {
+            switch (this.wrapMode) {
+                case 'NOWRAP':
+                    Object.assign(contentStyle, { 'white-space': 'nowrap', 'text-overflow': 'ellipsis', 'overflow': 'hidden' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        // 文本水平对齐
+        if (this.hAlign) {
+            switch (this.hAlign) {
+                case 'LEFT':
+                    Object.assign(contentStyle, { 'text-align': 'left' });
+                    break;
+                case 'CENTER':
+                    Object.assign(contentStyle, { 'text-align': 'center' });
+                    break;
+                case 'RIGHT':
+                    Object.assign(contentStyle, { 'text-align': 'right' });
+                    break;
+                case 'JUSTIFY':
+                    Object.assign(contentStyle, { 'text-align': 'justify' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        // 文本垂直对齐
+        if (this.vAlign) {
+            switch (this.vAlign) {
+                case 'TOP':
+                    Object.assign(contentStyle, { 'vertical-align': 'top' });
+                    break;
+                case 'MIDDLE':
+                    Object.assign(contentStyle, { 'vertical-align': 'middle' });
+                    break;
+                case 'BOTTOM':
+                    Object.assign(contentStyle, { 'vertical-align': 'bottom' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        return contentStyle;
+    }
+
 } 
\ No newline at end of file

src/model/panel-detail/panel-raw-item.ts

@@ -69,6 +69,30 @@ export class PanelRawitemModel extends PanelDetailModel {
      */
     public htmlContent!: string;
 
+    /**
+     * 换行模式{WRAP：换行、 NOWRAP：不换行 }
+     *
+     * @type {(string | 'WRAP' | 'NOWRAP')}
+     * @memberof PanelRawitemModel
+     */
+    public wrapMode: string | 'WRAP' | 'NOWRAP' = 'WRAP';
+
+    /**
+     * 文本垂直对齐模式{TOP：上对齐、 MIDDLE：居中、 BOTTOM：下对齐 }
+     *
+     * @type {(string | 'TOP' | 'MIDDLE' | 'BOTTOM')}
+     * @memberof PanelRawitemModel
+     */
+    public vAlign: string | 'TOP' | 'MIDDLE' | 'BOTTOM' = 'MIDDLE';
+
+    /**
+     * 文本水平对齐模式{LEFT：左对齐、 CENTER：居中、 RIGHT：右对齐、 JUSTIFY：两端对齐 }
+     *
+     * @type {(string | 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFY')}
+     * @memberof PanelRawitemModel
+     */
+    public hAlign: string | 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFY' = 'LEFT';
+
     /**
      * Creates an instance of PanelRawitemModel.
      * @param {*} [opts={}]
@@ -82,6 +106,9 @@ export class PanelRawitemModel extends PanelDetailModel {
         this.contentStyle = opts.contentStyle;
         this.rawContent = opts.rawContent;
         this.htmlContent = opts.htmlContent;
+        this.wrapMode = opts.wrapMode ? opts.wrapMode : 'WRAP';
+        this.vAlign = opts.vAlign ? opts.vAlign : 'MIDDLE';
+        this.hAlign = opts.hAlign ? opts.hAlign : 'LEFT';
     }
 
     /**
@@ -130,4 +157,75 @@ export class PanelRawitemModel extends PanelDetailModel {
         }
         return false;
     }
+
+    /**
+     * 获取元素样式（直接内容元素，包含内容盒子 大小/边距/内容 的样式）
+     *
+     * @return {*} 
+     * @memberof PanelRawitemModel
+     */
+    public getElementStyle() {
+        const elementStyle = {};
+        Object.assign(elementStyle, this.getBoxSizeStyle());
+        Object.assign(elementStyle, this.getBoxSpacingStyle());
+        Object.assign(elementStyle, this.getBoxContentStyle());
+        Object.assign(elementStyle, this.getBoxSelfAlignStyle());
+        return elementStyle;
+    }
+
+    /**
+     * 获取文本内容布局样式
+     *
+     * @protected
+     * @memberof PanelRawitemModel
+     */
+    protected getBoxContentStyle() {
+        const contentStyle = {};
+        // 文本换行模式
+        if (this.wrapMode) {
+            switch (this.wrapMode) {
+                case 'NOWRAP':
+                    Object.assign(contentStyle, { 'white-space': 'nowrap', 'text-overflow': 'ellipsis', 'overflow': 'hidden' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        // 文本水平对齐
+        if (this.hAlign) {
+            switch (this.hAlign) {
+                case 'LEFT':
+                    Object.assign(contentStyle, { 'text-align': 'left' });
+                    break;
+                case 'CENTER':
+                    Object.assign(contentStyle, { 'text-align': 'center' });
+                    break;
+                case 'RIGHT':
+                    Object.assign(contentStyle, { 'text-align': 'right' });
+                    break;
+                case 'JUSTIFY':
+                    Object.assign(contentStyle, { 'text-align': 'justify' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        // 文本垂直对齐
+        if (this.vAlign) {
+            switch (this.vAlign) {
+                case 'TOP':
+                    Object.assign(contentStyle, { 'vertical-align': 'top' });
+                    break;
+                case 'MIDDLE':
+                    Object.assign(contentStyle, { 'vertical-align': 'middle' });
+                    break;
+                case 'BOTTOM':
+                    Object.assign(contentStyle, { 'vertical-align': 'bottom' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        return contentStyle;
+    }
 }
\ No newline at end of file