Question

我是Bootstrap4中flexbox模态的新手。根据我的要求，我需要在嵌套的flex中显示截断的文本text-ellipsis。但无法显示。

请在下面找到我的代码并提出建议。 https://jsfiddle.net/trzd3xu1/1/

Answer 1

请参考此https://getbootstrap.com/docs/4.1/utilities/text/#text-wrapping-and-overflow链接。省略号只能在给定的宽度下工作。将宽度应用于代码也将达到目的。 “ https://jsfiddle.net/trzd3xu1/38/”更新了小提琴链接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IVR</title>
    <meta name="description" content="IVR">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

    <div class="wrapper d-flex flex-column">
        <header class="d-flex justify-content-center">Header</header>
        <main class="d-flex flex-row">
            <div class="sideNav">
                <ul>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                    <li>side link1</li>
                </ul>

            </div>
            <div class="rightContent">

                <div class="inside d-flex flex-row align-items-stretch">
                    <div class="column-1">leftMenu</div>
                    <div class="column-2">
                        <div class="text-truncate" style="width:4rem;">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</div>

                    </div>
                </div>

            </div>
        </main>
        <footer class="d-flex justify-content-center">Footer</footer>
    </div>

</body>

</html>

Answer 2

希望这可以帮助您：您应该添加Workbooks(newName).Close SaveChanges:=True 如果这是您的要求，那么这应该是解决方案： https://jsfiddle.net/besartm/kLtznj54/

文本溢出无法正常工作，并且bootstrap4中的flex破坏了布局

2 个答案: