Question

I am developing an application using html and javascript. I have a ui-scrolllistview on one page and I have it populating ok. But if a word is too big for the listview it just extends the width of it so it goes out of the screen.

Is there a way to set the length of a word or word wrap words within the ui-scrolllistview so that it does not cut off the right border of the ui-scrolllistview?

Thanks

EDIT

here is my code that is creating the page with the ui-scrolllist

<div data-role="page" data-theme="f" id="choose-building">

    <div data-role="header" data-theme="f" data-position="fixed"  data-tap-toggle="false">
    <h1><img src="images/building.png" height="80px"></h1>
        <div data-role="controlgroup" class="ui-btn-right topzero">
        <a href="#" data-rel="back"  data-role="button" data-inline="true"  data-direction="reverse">Back</a>
        <a id="applyFilter" data-role="button" data-inline="true" onClick="pickedBuildings();">Chosen Buildings</a>
        </div>
    </div>

    <div data-role="content" data-scroll="Y" class="ui-scrolllistview" >
        <form>

        <div data-role="fieldcontain">          

            <fieldset data-role="controlgroup" id="CatagoryChooseBuilding" >
            </fieldset>

        </div>
        </form>
    </div>
    <div data-role="footer" data-theme="f" data-position="inline" data-id="main-footer"  data-tap-toggle="false">
        <div data-role="navbar" >
        <ul>
            <li><a href="#home" data-role="button" data-icon="myapp-home" >Home</a></li>
            <li><a href="#page-map" data-role="button" data-icon="myapp-building-a" >Buildings</a></li>
            <li><a href="#more" data-role="button" data-icon="myapp-more" >More</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->  
</div>

Answer 1

I believe it sounds like you’re looking for text-overflow and white-space and possibly overflow.

You can use these different CSS properties to stop the text at whatever dimensions you would care to after setting up your margins and padding.

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Edit: Example

You can adjust the margin properties until you have scooted your text as far away from the scrollbars as you would like.

Edit: If you want to allow word wrapping where the Framework (jQuery mobile according to your tags) truncates it for you, on the inner-most element that contains your text, specify overflow: visible; and white-space:normal;

If you are not seeing the behavior change as you are expecting and wanting it to, then view the page through a Developer Tools window. These are built into Chrome and IE and you can use Firebug for Firefox. These allow you to test stylesheet changes ‘on the fly’ which sounds like what you’ll need to get the behavior you’re expecting.