Words auto break to new line

[gahhon]

My webpage is allow to scroll up and down but not left and right.
Assume my webpage left is contain something and right is used to display the some information.
Of curse, the information might be extremly long but how can i to auto break to new line instead of letting user scroll left and right

[JorgeM]

Do you have an example of the HTML that is produced for this page?

[gahhon]

<asp:Content ID="Content1" ContentPlaceHolderID="CPHInformation" runat="server">
    <div id="Report_Word">
        <asp:Label runat="server" Text="Month: " />
        <asp:DropDownList ID="ddlMonth" runat="server" AutoPostBack="true" />
        &nbsp;&nbsp;&nbsp;
        <asp:Label runat="server" Text="Year: " />
        <asp:DropDownList id="ddlYear" runat="server" AutoPostBack="true" />
    </div>
    <div id="Chart">
        <asp:Image ID="imgEmpty" runat="server" Visible="false" ImageUrl="~/Member/images/EmptyData.jpg" Width="598px" />
        <asp:Chart ID="pcBudget" runat="server" BackColor="Transparent" Height="600px" Width="600px">  
            <Titles>
                <asp:Title Name="Title1" BackColor="Transparent" Text="Monthly Budget Report" Alignment="MiddleCenter" Font="Estrangelo Edessa, 30pt"/>
            </Titles>
            <Series>
                <asp:Series Name="Series1" ChartType="Pie" Font="Cambria, 12pt" />     
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" BackColor="Transparent" Area3DStyle-Enable3D="true" />
            </ChartAreas>
            <Legends>
                <asp:Legend Name="Legend1" BackColor="Transparent" Alignment="Center" TableStyle="Wide" Docking="Bottom" Font="Cambria, 12pt" />
            </Legends>
        </asp:Chart>
    </div>
    <div style="margin-left:50%;">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaz</div>
</asp:Content>

Focus on the last <Div> section, in my webpage it cannot see the word "z" and it no allow to scroll left and right. I want it auto break new line when reach end of right? is that possible?

[JorgeM]

in my webpage it cannot see the word "z" and it no allow to scroll left and right

hmm... you should be able to scroll to the right. but OK..

I want it auto break new line when reach end of right

Well you have a very long string of characters with no spaces. If these where actual words with spaces, your browser would contain them within the element and allow the words to wrap.

If you want a really long string to wrap as well, you can use the word-wrap property or the newer overflow-wrap property. These properties allows you to define how to handle line breaking. word-wrap, still has support in every browser, including old versions of IE.

So for example...

<div style="margin-left:50%;<div style="margin-left:50%;word-wrap:break-word">
    aaaaaaaaa....aaaaz</div>

OR newer CSS3 property...

    <div style="margin-left:50%;<div style="margin-left:50%;overflow-wrap:break-word">
        aaaaaaaaa....aaaaz</div>

[gahhon]

It work with word-wrap property. Thanks