如何在asp.net treeview控件中设置节点文本宽度

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;
        }