个人中心
gpt4 book ai didi

html - CSS 在使用文本溢出时阻止 DIV 换行 : ellipsis

转载 作者：行者123 更新时间：2023-12-02 09:04:53 27 4
gpt4 key购买 nike

我正在尝试将一些文本和 div 全部放入一行(不换行)并使用 text-overflow: ellipsis。然而，在我所有的实验中(我什至不记得我尝试过的所有事情)，文本填满了整行，而 div 被推到新的一行。

enter image description here

我希望截断文本，以便蓝色框与文本位于同一行。

我能够让它与 JS 一起工作，但我想要一个纯 CSS 解决方案。

编辑:

抱歉，我应该添加更多详细信息。

  • 文本长度可变
  • 该解决方案应允许响应式页面设计(我将 width: 400px 用于约束容器，但实际上它是响应式的，抱歉，我知道我的问题具有误导性。)

.page-container{
  width: 400px;
  background: yellow;
}

div.header {
    white-space: nowrap;
    display: inline;
    width: 100%;
}

div.one-line-div {
    font-size: larger;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
}

.move-divs {
    display: inline-block;
    float: right;
}

.div1, .div2, .div3, .div4 {
    float: right;
    margin-right: 12px;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="page">
    <div class="page-container">
      <div class="header">
        <div class="one-line-div">Text text, so much text here, what do we do with all this text?.
          <div class="more-divs">
            <div class="div1">
            </div>
            <div class="div2">
            </div>
            <div class="div3">
            </div>
            <div class="div4">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

最佳答案

你试过 flex 盒子吗？根据我测试过的内容，它应该适合您。不过，您需要将文本包装在另一个 div 中。并且还需要将一些东西从 inline-block 改回 block，等等。基本上 flex-box 是新的布局引擎，它允许你做一些很棒的事情。一般来说，如果你使用 flex-box，你不应该需要 float 。查看this guide在 CSS-Tricks 的 flex-box 上。你可以用它做一些了不起的事情。如果您对我的回答有任何疑问，请告诉我。我不想讨论太多细节，因为那将是一个相当大的兔子洞。

.page-container{
  width: 400px;
  background: yellow;
}

/*
You don't need this anymore with flex.
div.header {
    white-space: nowrap;
    display: inline;
    width: 100%;
}*/

/* Updated to use flex box. */
div.one-line-div {
    display: flex;
    flex-direction: row;
    font-size: larger;
}
/* define the style for our .text element */
.text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* our .move-divs needs to be flex too */
.more-divs {
    display: flex;
    flex-direction: row;
}

/* I removed the floats and display inline, since you don't need them */
.div1, .div2, .div3, .div4 {
    margin-right: 12px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="page">
    <div class="page-container">
      <div class="header">
        <div class="one-line-div">
          <div class="text">
            Text text, so much text here, what do we do with all this text?.
          </div>
          <div class="more-divs">
            <div class="div1">
            </div>
            <div class="div2">
            </div>
            <div class="div3">
            </div>
            <div class="div4">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

关于html - CSS 在使用文本溢出时阻止 DIV 换行 : ellipsis，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59807245/

27 4 0
文章推荐： 删除 ggplot2 中未使用的 X 轴级别
文章推荐： octave - 如何创建 Octave 矩阵并用默认/初始值填充它
文章推荐： r - 使用用户导入的数据生成 R 脚本
文章推荐： css - 更改滚动条上的文字颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com