demos/tizen-winsets/tips/two-line-text/two-line-text.html

   1 <div data-role="page" data-add-back-btn="true" id="twolinesample">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Two line text sample</h1>
   4         </div><!-- /header -->
   5
   6         <div data-role="content">
   7                 <p> short button or long text button</p>
   8                 <p> do not need to control width. because button control text width in case content area<p>
   9                 <div data-role="button" data-inline="true">Text Button Test</div>
  10                 <div data-role="button" data-inline="true">Text Button Test. long text line</div>
  11                 <br>
  12                 <p> but some case, for example width fixed area or narrow width<br>
  13                 browser change text to ellipsis </p>
  14                         <fieldset data-role="controlgroup" data-type="horizontal">
  15                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="on" checked="checked" />
  16                                 <label for="segment861">List</label>
  17                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
  18                                 <label for="segment862">This button is very long text. This button is very long text</label>
  19                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
  20                                 <label id="textposition" for="segment863">This button is very long text<br>This button is very long text</label>
  21                         </fieldset>     <br>
  22                 <p> to make text in button, 2 line
  23                 <p> Simple making step is ...<br><br>
  24                 1. first insert &lt;br&gt; tag between text  <br><br>
  25                 2. then set fontsize to see text in small area <br>
  26                    &nbsp;&nbsp;ex&gt; $( "#textposition" ).css("font-size", "12px");  <br><br>
  27                 3. if element attribute or inner attributes has padding-top/bottom,<br>
  28                  control this value because this value hide some text top/bottom <br>
  29                    &nbsp;&nbsp;ex&gt; $( "#textposition" ).find("span").css("padding-top", "4px"); <br><br>
  30                 4. last control height between line text using line-height  <br>
  31                          &nbsp;&nbsp;ex&gt; $( "#textposition" ).find("span").css("line-height", "14px"); <br><br><br><br>
  32         </div>
  33         <div data-role="footer">
  34         </div>
  35 </div>