Shrink title text when smaller screen To prevent the "..."

[Daniel6149833]

When the screen gets smaller the title text will just add a "..." at the end. Is it possible to add code somewhere to shrink the text size so it will fit?

[maxkatz]

That's a standard jQuery Mobile behavior. There might be a setting to change this... check the docs.

[Daniel6149833]

Thanks"..."

[Daniel6149833]

Actually i think it can be changed with CSS. Any help?

[Kateryna Grynko]

Hi Daniel,

CSS property codetext-overflow: ellipsis;/code is responsible for this reduction. To intercept an event when the item is no longer fit you can use overflow event for FireFox and overflowchanged event for Safari and Chrome.

On Page Show event run the following JavaScript code:
codeAppery( "mobilebutton_2" ).find( ".ui-btn-inner" ).on( "overflow overflowchanged", function() {
alert( " overflow! " );
});/code
This code allows you to react when the mobilebutton_2 text no longer fit. Please inspect DOM-structure with the debugging tools. Note that we create an event handler not for the span in which the text, but for its wraper.

For other necessary elements choose an event receiver in the same way - wrapper of tag containing the text, not the tag with the text.

Also note that FireFox does not call overflow when the text is placed back in the element while Chrome and Safari cause overflowchanged.

For greater accuracy, your handler can check whether the item does not fit anymore.
codevar $container = $( this ),
$btn_text = $( $container.find( ".ui-btn-text" )[0] ); // again, code for button!

if ( $( $_container )&#46;innerWidth() + 10 < $( $btn_text )&#46;width() ) {
alert( "overflow" );
}/code