asp.net - asp.netツリービューコントロールでノードテキスト幅を設定する方法

Question

固定幅を設定した asp.net TreeView コントロールがありますが、ノードで幅を指定したにもかかわらず、ノード テキストがコントロールの端からはみ出します。

<style type="text/css">
    .treeNode {
        color:red;
        font: 14px Arial, Sans-Serif;
        width:30px;
    }

    .rootNode {
        font-size: 18px;
        color:blue;
        width:30px;
    }

    .leafNode {
        padding: 4px;
        color:orange;
        width:30px;
    }

    .selectNode {
        font-weight: bold;
        color:purple;
    }
</style>

<asp:TreeView ID="tvData" runat="server" ShowLines="True" Width="100" BorderStyle="Solid">
        <LeafNodeStyle CssClass="leafNode" />
        <NodeStyle CssClass="treeNode" />
        <RootNodeStyle CssClass="rootNode" />
        <SelectedNodeStyle CssClass="selectNode" />
        <Nodes>
            <asp:TreeNode Text="Root" Value="0">
                <asp:TreeNode Text="Products Products Products">
                    <asp:TreeNode Text="First Product" />
                    <asp:TreeNode Text="Second Product Second Product Second Product" />
                </asp:TreeNode>
            </asp:TreeNode>
        </Nodes>
    </asp:TreeView>

コントロールの境界外で実行されるテキストを停止したいのですが、別の行に折り返したくありません。

Answer 1

「mainTv」CSSをチェックしてください

<style type="text/css">
          .treeNode
                {
                    color: red;
                    font: 14px Arial, Sans-Serif;
                    width: 30px;
                }

                .rootNode
                {
                    font-size: 18px;
                    color: blue;
                    width: 30px;
                }

                .leafNode
                {
                    padding: 4px;
                    color: orange;
                    width: 30px;
                }

                .selectNode
                {
                    font-weight: bold;
                    color: purple;
                }

                .mainTv
                {
                    display: table;
                }
            </style>

            <asp:TreeView ID="tvData" runat="server" CssClass="mainTv" ShowLines="True" Width="100px"
                BorderStyle="Solid">
                <LeafNodeStyle CssClass="leafNode" />
                <NodeStyle CssClass="treeNode" />
                <RootNodeStyle CssClass="rootNode" />
                <SelectedNodeStyle CssClass="selectNode" />
                <Nodes>
                    <asp:TreeNode Text="Root" Value="0">
                        <asp:TreeNode Text="Products Products Products">
                            <asp:TreeNode Text="First Product" />
                            <asp:TreeNode Text="Second Product Second Product Second Product" />
                        </asp:TreeNode>
                    </asp:TreeNode>
                </Nodes>
            </asp:TreeView>

.mainTv
        {
            overflow:hidden;
        }