diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 432d9ced03..4c1e69e04b 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -130,8 +130,6 @@ class LegendView extends ComponentView {
             selectorPosition = orient === 'horizontal' ? 'end' : 'start';
         }
 
-        this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
-
         // Perform layout.
         const positionInfo = legendModel.getBoxLayoutParams();
         const viewportSize = {width: api.getWidth(), height: api.getHeight()};
@@ -139,6 +137,8 @@ class LegendView extends ComponentView {
 
         const maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding);
 
+        this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition, maxSize);
+
         const mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition);
 
         // Place mainGroup, based on the calculated `mainRect`.
@@ -173,7 +173,8 @@ class LegendView extends ComponentView {
         api: ExtensionAPI,
         selector: LegendSelectorButtonOption[],
         orient: LegendOption['orient'],
-        selectorPosition: LegendOption['selectorPosition']
+        selectorPosition: LegendOption['selectorPosition'],
+        maxSize: layoutUtil.LayoutRect,
     ) {
         const contentGroup = this.getContentGroup();
         const legendDrawnMap = zrUtil.createHashMap();
@@ -221,7 +222,8 @@ class LegendView extends ComponentView {
                 const itemGroup = this._createItem(
                     seriesModel, name, dataIndex,
                     legendItemModel, legendModel, itemAlign,
-                    lineVisualStyle, style, legendIcon, selectMode, api
+                    lineVisualStyle, style, legendIcon, selectMode, api,
+                    maxSize,
                 );
 
                 itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -276,7 +278,8 @@ class LegendView extends ComponentView {
                         const itemGroup = this._createItem(
                             seriesModel, name, dataIndex,
                             legendItemModel, legendModel, itemAlign,
-                            {}, style, legendIcon, selectMode, api
+                            {}, style, legendIcon, selectMode, api,
+                            maxSize,
                         );
 
                         // FIXME: consider different series has items with the same name.
@@ -387,7 +390,8 @@ class LegendView extends ComponentView {
         itemVisualStyle: PathStyleProps,
         legendIcon: string,
         selectMode: LegendOption['selectedMode'],
-        api: ExtensionAPI
+        api: ExtensionAPI,
+        maxSize: layoutUtil.LayoutRect,
     ) {
         const drawType = seriesModel.visualDrawType;
         const itemWidth = legendModel.get('itemWidth');
@@ -469,7 +473,8 @@ class LegendView extends ComponentView {
                 y: itemHeight / 2,
                 fill: textColor,
                 align: textAlign,
-                verticalAlign: 'middle'
+                verticalAlign: 'middle',
+                width: maxSize.width - textX,
             }, {inheritColor: textColor})
         }));
 
diff --git a/src/component/legend/ScrollableLegendView.ts b/src/component/legend/ScrollableLegendView.ts
index da19a699d1..40bcd9666c 100644
--- a/src/component/legend/ScrollableLegendView.ts
+++ b/src/component/legend/ScrollableLegendView.ts
@@ -114,12 +114,13 @@ class ScrollableLegendView extends LegendView {
         api: ExtensionAPI,
         selector: LegendSelectorButtonOption[],
         orient: ScrollableLegendOption['orient'],
-        selectorPosition: ScrollableLegendOption['selectorPosition']
+        selectorPosition: ScrollableLegendOption['selectorPosition'],
+        maxSize: layoutUtil.LayoutRect,
     ) {
         const self = this;
 
         // Render content items.
-        super.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
+        super.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition, maxSize);
 
         const controllerGroup = this._controllerGroup;
 
diff --git a/test/legend-overflow.html b/test/legend-overflow.html
new file mode 100644
index 0000000000..d32fa94e82
--- /dev/null
+++ b/test/legend-overflow.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+    </style>
+
+
+    <div id="main0"></div>
+
+
+    <script>
+        require(['echarts'], function (echarts) {
+            const firstColumnWidth = 128;
+            const option = {
+                grid: {
+                    left: firstColumnWidth,
+                },
+                legend: {
+                    data: [
+                        'Email Marketing', 'Affiliate Advertising', 'Video Advertising',
+                        'Direct Access', 'Search Engine',
+                        'Email Marketing 11111111', 'Affiliate Advertising 11111111',
+                        'Video Advertising 11111111', 'Direct Access 11111111', 'Search Engine 11111111'
+                    ],
+                    orient: 'vertical',
+                    left: 0,
+                    width: firstColumnWidth,
+                    textStyle: {
+                      overflow: 'break',
+                    },
+                },
+                xAxis: [{
+                    type: 'category',
+                    data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+                    axisLabel: {
+                        rotate: 45,
+                        position: 'middle',
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                }],
+                yAxis: [{
+                    type: 'value',
+                    position: 'right',
+                }],
+                series: [
+                    {
+                        name: 'Email Marketing',
+                        type: 'line',
+                        data: [120, 132, 101, 134, 90, 230, 210],
+                    },
+                    {
+                        name: 'Affiliate Advertising',
+                        type: 'line',
+                        data: [220, 182, 191, 234, 290, 330, 310],
+                    },
+                    {
+                        name: 'Video Advertising',
+                        type: 'line',
+                        data: [150, 232, 201, 154, 190, 330, 410],
+                    },
+                    {
+                        name: 'Direct Access',
+                        type: 'line',
+                        data: [320, 332, 301, 334, 390, 330, 320],
+                    },
+                    {
+                        name: 'Search Engine',
+                        type: 'line',
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    },
+                    {
+                        name: 'Email Marketing 11111111',
+                        type: 'line',
+                        data: [620, 732, 701, 734, 890, 930, 920],
+                    },
+                    {
+                        name: 'Affiliate Advertising 11111111',
+                        type: 'line',
+                        data: [120, 132, 101, 134, 90, 230, 210],
+                    },
+                    {
+                        name: 'Video Advertising 11111111',
+                        type: 'line',
+                        data: [220, 182, 191, 234, 290, 330, 310],
+                    },
+                    {
+                        name: 'Direct Access 11111111',
+                        type: 'line',
+                        data: [150, 232, 201, 154, 190, 330, 410],
+                    },
+                    {
+                        name: 'Search Engine 11111111',
+                        type: 'line',
+                        data: [320, 332, 301, 334, 390, 330, 320],
+                    },
+                ],
+
+            };
+            const chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Test Case Description of main0',
+                    'Legend text overflow should be handled correctly.'
+                ],
+                option: option,
+                width: 480,
+            });
+            chart.setOption(option);
+        });
+    </script>
+
+
+</body>
+
+</html>