Question

I am using a databound DataList in ASP.NET C# to create a tag cloud. Is there a way to make sure that each tag is rendered properly..i.e – have documentation and process and team composition on one line as the tag cloud grows? Here’s my code – many thanks for your help!

<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceHolder">
    <LayoutTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
    </LayoutTemplate>
    <ItemTemplate>
        <a href='<%# GenerateNegativeStoryDetails(Eval("Tag")) %>' style="color: #ff0000; text-align: center; margin: 15px; line-height: 30px; text-decoration:none; font-size: <%# GetTagSize(Convert.ToDouble(Eval("weight"))) %>"><%# Eval("Tag") %></a>
    </ItemTemplate>
    <EmptyDataTemplate>
        <asp:Label ID="negative_tags" runat="server" style="color: #ff0000;" Text="[NO NEGATIVE TAGS FOUND]"></asp:Label>
    </EmptyDataTemplate>
</asp:listview>
</div>

<br />

<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView2" ItemPlaceholderID="itemPlaceHolder">
    <LayoutTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
    </LayoutTemplate>
    <ItemTemplate>
        <a href='<%# GeneratePositiveStoryDetails(Eval("Tag")) %>' style="color: #33cc00; text-align: center; margin: 15px; line-height: 3px; text-decoration:none; font-size: <%# GetTagSize(Convert.ToDouble(Eval("weight"))) %>"><%# Eval("Tag") %></a>
    </ItemTemplate>
    <EmptyDataTemplate>
        <asp:Label ID="positive_tags" runat="server" style="color: #33cc00;" Text="[NO POSITIVE TAGS FOUND]"></asp:Label>
    </EmptyDataTemplate>
</asp:listview>
</div>

Answer 1

Consider styling the element wrapping each individual phrase with the style:

white-space:nowrap