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>
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>
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>
22 <p> to make text in button, 2 line
23 <p> Simple making step is ...<br><br>
24 1. first insert <br> tag between text <br><br>
25 2. then set fontsize to see text in small area <br>
26 ex> $( "#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 ex> $( "#textposition" ).find("span").css("padding-top", "4px"); <br><br>
30 4. last control height between line text using line-height <br>
31 ex> $( "#textposition" ).find("span").css("line-height", "14px"); <br><br><br><br>
33 <div data-role="footer">