@@ -102,7 +102,9 @@ Object.assign(pc, function () {
      * @property {Number} batchGroupId Assign element to a specific batch group (see {@link pc.BatchGroup}). Default value is -1 (no group).
      * @property {Array} layers An array of layer IDs ({@link pc.Layer#id}) to which this element should belong.
      * Don't push/pop/splice or modify this array, if you want to change it - set a new one instead.
-     * @property {Boolean} enableMarkup Flag for enabling markup processing
+     * @property {Boolean} enableMarkup Flag for enabling markup processing. Only works for {@link pc.ELEMENTTYPE_TEXT} types.
+     * @property {Number} rangeStart Index of the first character to render. Only works for {@link pc.ELEMENTTYPE_TEXT} types.
+     * @property {Number} rangeEnd Index of the last character to render. Only works for {@link pc.ELEMENTTYPE_TEXT} types.
      */
     var ElementComponent = function ElementComponent(system, entity) {
         pc.Component.call(this, system, entity);
@@ -1536,6 +1538,8 @@ Object.assign(pc, function () {
     _define("shadowColor");
     _define("shadowOffset");
     _define("enableMarkup");
+    _define("rangeStart");
+    _define("rangeEnd");
 
     return {
         ElementComponent: ElementComponent
 
@@ -116,6 +116,10 @@ Object.assign(pc, function () {
         this._system.app.i18n.on('set:locale', this._onLocaleSet, this);
         this._system.app.i18n.on('data:add', this._onLocalizationData, this);
         this._system.app.i18n.on('data:remove', this._onLocalizationData, this);
+
+        // substring render range
+        this._rangeStart = 0;
+        this._rangeEnd = 0;
     };
 
     var LINE_BREAK_CHAR = /^[\r\n]$/;
@@ -330,28 +334,7 @@ Object.assign(pc, function () {
                 this._symbolColors = null;
             }
 
-            var charactersPerTexture = {};
-
-            var char, info, map;
-            for (i = 0, len = this._symbols.length; i < len; i++) {
-                char = this._symbols[i];
-                info = this._font.data.chars[char];
-                // if char is missing use 'space' or first char in map
-                if (!info) {
-                    if (this._font.data.chars[' ']) {
-                        info = this._font.data.chars[' '];
-                    } else {
-                        info = this._font.data.chars[Object.keys(this._font.data.chars)[0]];
-                    }
-                }
-
-                map = info.map;
-
-                if (!charactersPerTexture[map])
-                    charactersPerTexture[map] = 0;
-
-                charactersPerTexture[map]++;
-            }
+            var charactersPerTexture = this._calculateCharsPerTexture();
 
             var removedModel = false;
 
@@ -492,6 +475,11 @@ Object.assign(pc, function () {
             }
 
             this._updateMeshes();
+
+            // update render range
+            this._rangeStart = 0;
+            this._rangeEnd = this._symbols.length;
+            this._updateRenderRange();
         },
 
         _removeMeshInstance: function (meshInstance) {
@@ -1120,6 +1108,53 @@ Object.assign(pc, function () {
         _shouldAutoFit: function () {
             return this._autoFitWidth && !this._autoWidth ||
                    this._autoFitHeight && !this._autoHeight;
+        },
+
+        // calculate the number of characters per texture up to, but not including
+        // the specified symbolIndex
+        _calculateCharsPerTexture: function (symbolIndex) {
+            var charactersPerTexture = {};
+
+            if (symbolIndex === undefined) {
+                symbolIndex = this._symbols.length;
+            }
+
+            var i, len, char, info, map;
+            for (i = 0, len = symbolIndex; i < len; i++) {
+                char = this._symbols[i];
+                info = this._font.data.chars[char];
+                if (!info) {
+                    // if char is missing use 'space' or first char in map
+                    info = this._font.data.chars[' '];
+                    if (!info) {
+                        // otherwise if space is also not present use the first character in the
+                        // set
+                        info = this._font.data.chars[Object.keys(this._font.data.chars)[0]];
+                    }
+                }
+
+                map = info.map;
+                if (!charactersPerTexture[map]) {
+                    charactersPerTexture[map] = 1;
+                } else {
+                    charactersPerTexture[map]++;
+                }
+            }
+            return charactersPerTexture;
+        },
+
+        _updateRenderRange: function () {
+            var startChars = this._rangeStart === 0 ? 0 : this._calculateCharsPerTexture(this._rangeStart);
+            var endChars = this._rangeEnd === 0 ? 0 : this._calculateCharsPerTexture(this._rangeEnd);
+
+            var i, len;
+            for (i = 0, len = this._meshInfo.length; i < len; i++) {
+                var start = startChars[i] || 0;
+                var end = endChars[i] || 0;
+                var mesh = this._meshInfo[i].meshInstance.mesh;
+                mesh.primitive[0].base = start * 3 * 2;
+                mesh.primitive[0].count = (end - start) * 3 * 2;
+            }
         }
     });
 
@@ -1752,6 +1787,34 @@ Object.assign(pc, function () {
         }
     });
 
+    Object.defineProperty(TextElement.prototype, 'rangeStart', {
+        get: function () {
+            return this._rangeStart;
+        },
+        set: function (rangeStart) {
+            rangeStart = Math.max(0, Math.min(rangeStart, this._symbols.length));
+
+            if (rangeStart !== this._rangeStart) {
+                this._rangeStart = rangeStart;
+                this._updateRenderRange();
+            }
+        }
+    });
+
+    Object.defineProperty(TextElement.prototype, 'rangeEnd', {
+        get: function () {
+            return this._rangeEnd;
+        },
+        set: function (rangeEnd) {
+            rangeEnd = Math.max(this._rangeStart, Math.min(rangeEnd, this._symbols.length));
+
+            if (rangeEnd !== this._rangeEnd) {
+                this._rangeEnd = rangeEnd;
+                this._updateRenderRange();
+            }
+        }
+    });
+
     return {
         TextElement: TextElement
     };