troubleshooting Question

How do I break a word using css or in html?

Avatar of lesleyg
lesleyg asked on
CSSHTMLASP.NET
4 Comments2 Solutions665 ViewsLast Modified:
I have a datalist which has tables within it.  There is a description area within tables being displayed and the text for some of it is too long i.e. say  30 characters without any whitespace between them.  This is resulting in the affected tables being much wider than I want them to be.  I have tried using STYLE="overflow: hidden; word-wrap:break-word;" on the div of the area where i want the text to break but it wont work on either firefox or explorer.  The html and css i have so far is below.  Any help would be much appreciated.  I want the text to break inside div tablecontentinfo and class desc.  Thanks.

<asp:datalist id="dlList" runat="server" RepeatColumns="3">
  <ItemTemplate>
   <table cellSpacing="3" cellPadding="0" border="0">
    <tr height="0px">
     <td>
      <table class="mainbox_header" cellSpacing="0" cellPadding="0">
       <tr>
        <td>
         <asp:HyperLink id="hlName" runat="server">HyperLink</asp:HyperLink>
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr class="main_box_Style">
     <td>
      <table cellSpacing="0" cellPadding="0">
       <tr>
        <td>
         <div class="tbltopinfo">
          <table width="190px">
           <tr>
            <td class="image" vAlign="top">
             <asp:HyperLink id="hlprodimage" runat="server"></asp:HyperLink>
            </td>
            <td class="prodinfo">
             <asp:literal id="litlogo" Runat="server"></asp:literal>
             <asp:Label CssClass="priceimage" id="labSellPrice" runat="server" ></asp:Label>
            </td>
           </tr>
          </table>
        </div>
       </td>
       <asp:literal id="litdelimage" runat="server"></asp:literal>
      </tr>
      <tr>
       <td vAlign="top">
         <div class="tablecontentinfo">
          <table width="186px">
           <tr>
            <td class="desc">
             <asp:Literal id="litname" Runat="server"></asp:Literal>
            </td>
            <td class="btnarea">
             <asp:Button id="btnAdd" runat="server" CssClass="btnmore"     commandname="cmdBuy"></asp:Button><br>
             <asp:hyperlink id="hypmore" CssClass="hypmore" runat="server">More</asp:hyperlink>
            </td>
           </tr>
          </table>
         </div>
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </ItemTemplate>
</asp:datalist>



.filterpage .filtersearch,
.filterpage #filterproductlisting {
      margin-left:7px;
}

.filterpage #filterproductlisting {
      margin-top:29px!important;
}

#filterproductpage #productsort #sort {
      margin-left: 10px;
}

.catlist {
      margin-top: 56px;
}

.catlist #productsortcontent {
      margin-left: 7px;
}


.filterpage .filtersearch .mainbox_header,
.filterpage #filterproductlisting .mainbox_header {
      background: url(../images/CurrentWebsite/full_header.gif) no-repeat;
      background-color: #48468D;
      height: 10px;
      width: 190px;
}

.filterpage #filterproductlisting #productgridnavigation {
      margin-top:30px;
      text-align:center;
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size:12px;
}

.tablecontentinfo .desc {
      border:solid 1px red;
      /*width:140px;*/
      
}

.tablecontentinfo .btnarea {
      border:solid 1px green;
      /*width:50px;*/
}



.filterpage #filterproductlisting #productgridnavigation a,
#productgridnavigation a {
      color: #949494;
}


.filterpage .filtersearch .mainbox_header a,
.filterpage #filterproductlisting .mainbox_header a {
      font-family:Arial, Verdana, Helvetica, sans-serif;
      font-size: 12px;
      color: #ffffff;
      font-weight:bold;
      text-decoration: none;
      display: block;
      line-height: 20px;          
      padding-left: 3px;
}

.homepage .homecentrearea .tbltopinfo table,
.filterpage .filtersearch .tbltopinfo table,
.filterpage #filterproductlisting .tbltopinfo table {
      border-left: solid 1px #cccccc;
      border-right: solid 1px #cccccc;      
}

.filterpage .filtersearch .tablecontentinfo,
.filterpage #filterproductlisting .tablecontentinfo {
      border: solid 1px #cccccc;
      font-size: 12px;
      color: #949494;
}

.filterpage #filterproductlisting .tablecontentinfo tr td {
      font-size: 12px;
      font-family:Arial, Verdana, Helvetica, sans-serif;
      color: #949494;
}


.filterpage .filtersearch .priceimage,
.filterpage #filterproductlisting .priceimage {
      background: url(../images/CurrentWebsite/orange_tag.gif) no-repeat;
      height: 35px;
      display: block;
      color: #fff;
      font-weight: bold;
      padding-top: 5px;
      padding-left: 13px;
      font-size: 17px;
}



.filterpage .filtersearch .btnmore,
.filterpage #filterproductlisting .btnmore {
      background: url(../images/CurrentWebsite/go_button.gif) no-repeat;
      height: 24px;
      width: 24px;
      border: none;
}

.filterpage .filtersearch .btnarea .hypmore,
.filterpage #filterproductlisting .btnarea .hypmore {
      color: #949494;
}


.filterpage .filtersearch .btnarea,
.filterpage #filterproductlisting .btnarea {
      height:65px;
}
ASKER CERTIFIED SOLUTION
ShahzadAtta

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros