gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,599 lines (614 loc) • 73.6 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® TextBlock Class</title>
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/highlight.js"></script>
<script src="../../assets/js/api.js"></script>
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
<!-- custom CSS after bootstrap -->
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../doc/download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Diagram Classes</span>
</div>
</div>
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Geometry Classes</span>
</div>
</div>
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Model Classes</span>
</div>
</div>
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Layout Classes</span>
</div>
</div>
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Tool Classes</span>
</div>
</div>
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Collection Classes</span>
</div>
</div>
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
</ul>
</div>
</div>
</div> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</div>
<div id="contentBody" class="col-md-10">
<!-- ============================== header ================================= -->
<div id="header" class="fineprint mt30">
<b>GoJS</b>® Diagramming Components<br/>version 1.7.19 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle mt30">
Class TextBlock
</h2>
<!-- ============================== class summary ========================== -->
<span class="hideshowall">
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
<span class="details"><button id="buttonHide">Show Summaries</button></span>
</span>
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span>
A TextBlock is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that displays a <a href="../symbols/TextBlock.html#text" class="linkProperty">text</a> string in a given <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a>.
<p>
The size and appearance of the text is specified by <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a>,
which takes a well-formed CSS string as its value.
The order of the CSS properties given is important for cross-browser compatibility,
and should be given in this order:
<p>
<em>"font-style font-variant font-weight font-size font-family"</em>
<p>
For example, "Italic small-caps bold 32px Georgia, Serif" is a valid font string
using every CSS font property. Note that not all browsers may support every property.
<p>
Text is drawn using the <a href="../symbols/TextBlock.html#stroke" class="linkProperty">stroke</a> brush, which may be any CSS color string or a <a href="../symbols/Brush.html" class="linkConstructor">Brush</a>.
Some created TextBlocks:
<pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
// A TextBlock with text and stroke properties set:
$(go.TextBlock, { text: "Hello World", stroke: "gray" })
// Alternatively:
$(go.TextBlock, "Hello World", { stroke: "gray" })</pre>
<p>
TextBlocks typically receive a natural size based on their text and font strings,
but often a width is given in order to cause the text to wrap at a certain place.
In order for wrapping to occur, the <a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a> property must not be <a href="../symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>.
<p>
TextBlocks can be edited by users using the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.
The HTML Element that a given TextBlock uses as its text editor can be customized
by setting the <a href="../symbols/TextBlock.html#textEditor" class="linkProperty">textEditor</a> property. For an example of custom text editing tool use,
see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.
<p class="boxread">
For examples of TextBlock possibilities and functionality,
see the <a href="../../intro/textBlocks.html">Introduction page on TextBlocks</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class TextBlock.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" >
<div class="name">
TextBlock()
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>A newly constructed <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a> has no string to show; if it did,
it would draw the text, wrapping if needed, in the default font using a black stroke.
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class TextBlock.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="choices" >
<td class="name">
<div class="name">
choices
</div>
<div class="attributes">
<span class="light">{Array.<string>|null}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the an array of possible choices for a custom <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.<span class="nodetails" id="xpropchoices"><a class="morelink" onclick="hst('propchoices')">More...</a></span> <span class="details" id="propchoices">
The value must be an array of strings.
</span><div class="details" id="dpropchoices"><p>
The default value is null.
For example usage, see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.</div>
</div>
</td>
</tr>
<tr id="editable" >
<td class="name">
<div class="name">
editable
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether or not this TextBlock allows in-place editing of the <a href="../symbols/TextBlock.html#text" class="linkProperty">text</a>
string by the user with the help of the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.<span class="nodetails" id="xpropeditable"><a class="morelink" onclick="hst('propeditable')">More...</a></span> <span class="details" id="propeditable">
The default is false.
</span><div class="details" id="dpropeditable"><p>
See also <a href="../symbols/Part.html#textEditable" class="linkProperty">Part.textEditable</a>.</div>
</div>
</td>
</tr>
<tr id="errorFunction" >
<td class="name">
<div class="name">
errorFunction
</div>
<div class="attributes">
<span class="light">{function(TextEditingTool, string, string) | null}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the function to call if a text edit made with the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a> is invalid.<span class="nodetails" id="xproperrorFunction"><a class="morelink" onclick="hst('properrorFunction')">More...</a></span> <span class="details" id="properrorFunction">
The default is null.</span>
</div>
</td>
</tr>
<tr id="font" >
<td class="name">
<div class="name">
font
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the current font settings.<span class="nodetails" id="xpropfont"><a class="morelink" onclick="hst('propfont')">More...</a></span> <span class="details" id="propfont">
The font property must be a valid CSS string describing a font.
The font string can accept several CSS properties but they must be
in a specific order in order to render correctly across all browsers:
</span><div class="details" id="dpropfont"><p>
<code>"font-style font-variant font-weight font-size font-family"</code>
<p>
For example, <code>"Italic small-caps bold 32px Georgia, Serif"</code> is a valid font string
using every CSS font property. Not every browser can render every font option.
For more information about CSS font syntax, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font">CSS fonts (mozilla.org)</a>.
<p>
The default font is "13px sans-serif".</div>
</div>
</td>
</tr>
<tr id="graduatedEnd" >
<td class="name">
<div class="name">
graduatedEnd
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the fractional distance along the main shape of a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> at which this kind of tick text should end.<span class="nodetails" id="xpropgraduatedEnd"><a class="morelink" onclick="hst('propgraduatedEnd')">More...</a></span> <span class="details" id="propgraduatedEnd">
The default is 1; the value should range from 0 to 1.</span>
</div>
</td>
</tr>
<tr id="graduatedFunction" >
<td class="name">
<div class="name">
graduatedFunction
</div>
<div class="attributes">
<span class="light">{function(number): string}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the function to convert from a value along a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> to a string.<span class="nodetails" id="xpropgraduatedFunction"><a class="morelink" onclick="hst('propgraduatedFunction')">More...</a></span> <span class="details" id="propgraduatedFunction">
The default returns a string representing the value rounded to at most 2 decimals.
</span><div class="details" id="dpropgraduatedFunction"><p>
The function takes a number argument, a value between <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">Panel.graduatedMin</a> and <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">Panel.graduatedMax</a>.
The function will return a string, the text that will appear at the value of the argument.</div>
</div>
</td>
</tr>
<tr id="graduatedStart" >
<td class="name">
<div class="name">
graduatedStart
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the fractional distance along the main shape of a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> at which this text should start.<span class="nodetails" id="xpropgraduatedStart"><a class="morelink" onclick="hst('propgraduatedStart')">More...</a></span> <span class="details" id="propgraduatedStart">
The default is 0; the value should range from 0 to 1.</span>
</div>
</td>
</tr>
<tr id="interval" >
<td class="name">
<div class="name">
interval
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets how frequently this text should be drawn within a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>,
in multiples of the <a href="../symbols/Panel.html#graduatedTickUnit" class="linkProperty">Panel.graduatedTickUnit</a>.<span class="nodetails" id="xpropinterval"><a class="morelink" onclick="hst('propinterval')">More...</a></span> <span class="details" id="propinterval">
The default is 1. Any new value must be a positive integer.</span>
</div>
</td>
</tr>
<tr id="isMultiline" >
<td class="name">
<div class="name">
isMultiline
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether or not the text displays multiple lines or embedded newlines.<span class="nodetails" id="xpropisMultiline"><a class="morelink" onclick="hst('propisMultiline')">More...</a></span> <span class="details" id="propisMultiline">
If this is false, all characters including and after the first newline will be omitted.
The default is true.</span>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/TextBlock.html#maxLines" class="linkProperty">maxLines</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="isStrikethrough" >
<td class="name">
<div class="name">
isStrikethrough
</div>
<div class="attributes">
<span class="light">{boolean}</span>
<span class="since" title="since">1.2</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether or not the text has a strikethrough line (line-through).<span class="nodetails" id="xpropisStrikethrough"><a class="morelink" onclick="hst('propisStrikethrough')">More...</a></span> <span class="details" id="propisStrikethrough">
The default is false.</span>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/TextBlock.html#isUnderline" class="linkProperty">isUnderline</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="isUnderline" >
<td class="name">
<div class="name">
isUnderline
</div>
<div class="attributes">
<span class="light">{boolean}</span>
<span class="since" title="since">1.2</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether or not the text is underlined.<span class="nodetails" id="xpropisUnderline"><a class="morelink" onclick="hst('propisUnderline')">More...</a></span> <span class="details" id="propisUnderline">
The default is false.</span>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/TextBlock.html#isStrikethrough" class="linkProperty">isStrikethrough</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="lineCount" >
<td class="name">
<div class="name">
lineCount
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns the total number of lines in this TextBlock, including lines created
from embedded newlines (<code>\n</code>), <a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a>ping, and <a href="../symbols/TextBlock.html#maxLines" class="linkProperty">maxLines</a>.<span class="nodetails" id="xproplineCount"><a class="morelink" onclick="hst('proplineCount')">More...</a></span> <span class="details" id="proplineCount">
</span><div class="details" id="dproplineCount"><p>
This value may be meaningless before the TextBlock is measured.</div>
</div>
</td>
</tr>
<tr id="maxLines" >
<td class="name">
<div class="name">
maxLines
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.5</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the maximum number of lines that this TextBlock can display.<span class="nodetails" id="xpropmaxLines"><a class="morelink" onclick="hst('propmaxLines')">More...</a></span> <span class="details" id="propmaxLines">
Value must be a greater than zero whole number or <code>Infinity</code>.
The default is <code>Infinity</code>.
</span><div class="details" id="dpropmaxLines"><p>
Modifying this value may modify the computed height of the TextBlock.
If maxLines is set, the value of <a href="../symbols/TextBlock.html#lineCount" class="linkProperty">lineCount</a> will never be larger than maxLines.</div>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/TextBlock.html#isMultiline" class="linkProperty">isMultiline</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="naturalBounds" >
<td class="name">
<div class="name">
naturalBounds
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns the natural bounds of this TextBlock in local coordinates,
as determined by its <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a> and <a href="../symbols/TextBlock.html#text" class="linkProperty">text</a> string, and optionally its desiredSize.
</div>
</td>
</tr>
<tr id="overflow" >
<td class="name">
<div class="name">
overflow
</div>
<div class="attributes">
<span class="light">{EnumValue}</span>
<span class="since" title="since">1.4</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets how text that is too long to display should be handled.<span class="nodetails" id="xpropoverflow"><a class="morelink" onclick="hst('propoverflow')">More...</a></span> <span class="details" id="propoverflow">
</span><div class="details" id="dpropoverflow"><p>
Possible values are <a href="../symbols/TextBlock.html#OverflowClip" class="linkConstant">TextBlock.OverflowClip</a> and <a href="../symbols/TextBlock.html#OverflowEllipsis" class="linkConstant">TextBlock.OverflowEllipsis</a>.
For OverflowEllipsis to work, you must also set wrap to <a href="../symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>
or limit the number of lines with <a href="../symbols/TextBlock.html#maxLines" class="linkProperty">maxLines</a>.
<p>
The default value is <a href="../symbols/TextBlock.html#OverflowClip" class="linkConstant">TextBlock.OverflowClip</a>.</div>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="stroke" >
<td class="name">
<div class="name">
stroke
</div>
<div class="attributes">
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the <a href="../symbols/Brush.html" class="linkConstructor">Brush</a> or string that describes the stroke (color) of the text that is drawn.<span class="nodetails" id="xpropstroke"><a class="morelink" onclick="hst('propstroke')">More...</a></span> <span class="details" id="propstroke">
</span><div class="details" id="dpropstroke"><p>
The default value is <code>"black"</code>.
Any valid CSS string can specify a solid color, and the <a href="../symbols/Brush.html" class="linkConstructor">Brush</a>
class can be used to specify a gradient or pattern.
More information about the syntax of CSS color strings is available at:
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</div>
</div>
</td>
</tr>
<tr id="text" >
<td class="name">
<div class="name">
text
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the TextBlock's text string.<span class="nodetails" id="xproptext"><a class="morelink" onclick="hst('proptext')">More...</a></span> <span class="details" id="proptext"> The default is an empty string.
The text of a TextBlock, along with the values of <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a>, <a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a>,
<a href="../symbols/TextBlock.html#isMultiline" class="linkProperty">isMultiline</a> and sizing restrictions are what naturally determine
the size of the TextBlock.
</span><div class="details" id="dproptext"><p>
The text in textblocks can include manual line-breaks by using the character escape, <code>\n</code>.
<p>
Leading and trailing whitespace is eliminated in each line of TextBlock text.
<p>
If <a href="../symbols/TextBlock.html#editable" class="linkProperty">editable</a> is set to true, users can edit textblocks with the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.</div>
</div>
</td>
</tr>
<tr id="textAlign" >
<td class="name">
<div class="name">
textAlign
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the alignment location in the TextBlock's given space.<span class="nodetails" id="xproptextAlign"><a class="morelink" onclick="hst('proptextAlign')">More...</a></span> <span class="details" id="proptextAlign">
The possible values are <code>"start"</code>, <code>"end"</code>, <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.
Any other value is invalid.
</span><div class="details" id="dproptextAlign"><p>
This property is most pertinent when the TextBlock has multiple lines of text,
or when the TextBlock is given a size that differs from