css - 文本溢出不起作用，布局因 bootstrap 4 中的 flex 而中断-6ren

css - 文本溢出不起作用，布局因 bootstrap 4 中的 flex 而中断

转载作者：行者123 更新时间：2023-11-28 01:22:55

24

4

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

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

最佳答案

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

<!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>

关于css - 文本溢出不起作用，布局因 bootstrap 4 中的 flex 而中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51394661/

24

4

0

文章推荐： c++ - 队列不返回正确的值

文章推荐： c++ - 新的运营商 ->有或没有

文章推荐： javascript - 使用带有云缩放插件的选项

android - sw320dp 布局 block xlarge 布局
我为 S3 做了一个额外的布局(所有布局的反叛)，人们说，使用 layout-sw320dp 对 s3 有好处。一切正常，s3 选择了这个文件夹，布局在 s3 上看起来很棒。但是当我尝试在 10"平
html - 未对齐的 CSS 布局 - 具有固定中心的 3 col 布局
我是 CSS 的新手，我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。目前，页脚在尺寸和位置上似乎都没有对齐。 I have attached
Java游戏-布局
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭10 年前。 Improve th
android确定设备是否为从右到左的语言/布局
有没有办法确定设备是从右到左的语言(比如阿拉伯语)而不是从左到右的语言(英语)？需要与旧 API 级别(低至 10)兼容的东西解决方案我最终在接受的答案中使用了 xml 方法。更进一步，我还添加
QT 布局 - 初始方向
我是 QT 的新手。我试图通过实现下面看到的这个小窗口来理解布局机制。它在作为主窗口的 QWidget 下具有以下元素: 一个延伸到所有客户区域的大型 QWidget。窗口顶部的两个 QWidget
Extjs Accordion 布局
Accordion 布局是堆叠面板布局，因为此时只有一个面板可见，但我想同时显示两个面板可见，所以我们可以使用 Accordion 面板来做到这一点吗？？最佳答案您不能扩展现有的 Accordio
sql - 简单的数据库表设计/布局
我只是想知道，作为一个假设示例，针对以下场景布局表格的最佳方式是什么: 假设我正在编写一个用于跟踪学生出勤的应用程序。每年年初，我都想添加所有学生(我将手动执行此操作 - 现在，是否应该为这里的每个学
SVN 布局——最佳实践
在 CVS 中，我们的项目中有多个目录。有一个夜间构建，它必须从同一个 CVS 项目的不同目录中提取东西才能构建夜间构建。所以我应该记住这一点，如果我们迁移到 SVN，我必须修改构建脚本以从不同的存
窗口上的 WPF 布局
我在 WPF Windows 上有几个列表框，带有 Height="Auto" Width="Auto"在表格上设置表单大小在不同分辨率下完美匹配，但问题是当我按下最大化按钮时，在表单调整大小时会看
WPF 布局，我可以清理它吗？
仅供引用，我是 WPF 的新手。我正在我的 WPF 应用程序中创建一个侧边栏并想要圆角。我学到的不是可以附加到网格的属性。另外，我尝试将文本块放在边框控件中，但我收到的错误消息说“ child 只能
codeigniter - 如何使用基本设计样式创建母版页(布局)
我是CodeIgniter的新手。我想使用包含菜单，页脚等的基本样式创建母版页或布局。我不想在所有页面中编写重复的内容并为所有页面自动加载。例如，我可以在asp.net中创建母版页，或者在asp.ne
一个窗口的 eclipse 布局
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
Magento XML 布局
上面的代码中，放置“as=”footer_links”是什么意思？最佳答案 as="x" 语法定义模板可用来调用 block 的名称。因此，对于以下内容: 在outer_block.p
c++ - RegGetValueA格式/布局
我试图编写一个检查注册表值的功能，以查看Windows上的控制台是否启用了颜色。 Computer\HKEY_CURRENT_USER\Console\VirtualTerminalLevel 如果您
动态添加区域到 Marionette 布局
我有一个布局，但无法提前定义其所有区域，因为它们是未知的。稍后创建了 ItemView，我想使用 View 的 ID 作为区域名称在布局中创建一个新区域，这样我就可以说: layout.dynami
以多列和行作为启动任务的 ConEmu 布局
我们有一个相当复杂的 gulp 构建过程，涉及多个模块，每个模块都有一个或两个 watch 。我想在一个仪表板中监控这一点，如下所示: 每一列都是一个模块，列内的每一行都是后续的构建步骤。一旦第 1
Java JFrame 布局
这就是问题所在，我有一个 MainWindow 类，它在一个设置例程中扩展了 JFrame，我将该类的布局设置为新的 CardLayout()。这一切都工作正常，但是当我从 JFrame 请求布局并将
Java JFrame 布局
我正在制作一个简单的迷宫程序，用户可以在其中创建墙壁、路径、起点和终点，单击“解决”，迷宫将被解决。为此，我有一个大小为 640x480 的 java JFrame。在 JFrame 的左侧，我有一个
一个窗口的 eclipse 布局
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
JavaFX VBox 布局
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行，然后绘制 2 条水平线，在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。我知道这

首页

博学

6Ren·AI

商城

css - 文本溢出不起作用，布局因 bootstrap 4 中的 flex 而中断