CODEWITHSUNDEEP
cssasp.netword-wrap
TheGateKeeper
TheGateKeeper

Reputation: 4540

Applying text-wrap using css

im trying to apply text wrap to td (table data) using:

.gvUpdatesStyle .updateSummary {width:200px; white-space:normal;}

But it isnt working and the td is going above 200px.

Edit: Here is the html, but please note that this is generated by the GridView:

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="ContentPlaceHolder1_gvUpdates" rules="all" class="marginLeftRightBottom10px center gvUpdatesStyle">
    <tbody><tr>
        <th scope="col">Update Id</th><th scope="col">Date</th><th scope="col">Text</th>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$0')">17</a></td><td>29 ta' Awissu</td><td class="updateSummary">fgdfgdfgdfgfd</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$1')">18</a></td><td>29 ta' Awissu</td><td class="updateSummary">dfgdfgdfgfdg</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$2')">4</a></td><td>27 ta' Awissu</td><td class="updateSummary">dsfsdfdsfdfgfdgfdgfd</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$3')">5</a></td><td>27 ta' Awissu</td><td class="updateSummary">jkljl</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$4')">0</a></td><td>15 ta' Awissu</td><td class="updateSummary">testlol</td>
    </tr>
</tbody></table>

Edit: With further testing, i found out that it doesnt actually work with really long input, and appears as so:

Upvotes: 0

Views: 1970

Answers (2)

Josh Darnell
Josh Darnell

Reputation: 11433

Try this:

.gvUpdatesStyle .updateSummary td {width:200px; white-space:normal;}

This explicitly applies the styling to the td elements that match your class selectors .gvUpdatesStyle and .updateSummary

EDIT: Based on your newly posted HTML, it looks like you're just over-selecting. this worked for me

.gvUpdatesStyle td {width:200px; word-wrap:break-word; }

Although, now that I try it, it works with the other selectors you previously posted as well:

.gvUpdatesStyle .updateSummary {width:200px; word-wrap:break-word; }

EDIT #42: This works in chrome, firefox and IE

.gvUpdatesStyle .updateSummary { width:200px; max-width:200px; word-wrap:break-word; }

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

There is no whitespace in your element text so the opportunity to wrap is not presented.

See the white space processing here: http://www.w3.org/TR/CSS2/text.html#propdef-white-space

EDIT: Note the same thing in this example page:http://jsbin.com/equday/edit#preview where the text goes outside the border for the container.

Upvotes: 0

Related Questions