CSS div自动调整大小到内容,带有最大宽度和省略号文本

pro

我正在尝试像这样的东西,所以给定每行上最长的文本,容器的宽度自动调整大小。

在此处输入图片说明

但是我想要容器的最大宽度,如果超出了最大宽度,那么我希望在省略的文本上显示省略号。

在此处输入图片说明

每行都有自己的缩进,我希望将鼠标悬停在整行上。

我对此有些裂痕,但它对我不起作用...

https://jsfiddle.net/sprotty/wfdkeq1L/18/

.component-body-inputs {
  max-width: 500px;
  width:fit-content(); /* doesn't seem to do anything*/
  background-color: yellow;  
  white-space: nowrap;
}


.component-body-inputs>div {
  overflow: hidden;
  border-top: solid 1px black;
}

.component-body-inputs>div>img {
  width: 1em;
  height: 1em;
}

.component-body-inputs>div>div {
  display: inline-block;
  text-overflow: ellipsis;  /* doesn't seem to do anything*/

}

.component-body-inputs>div:hover {
  background-color: lightgray;
}
  <div class="component-body-inputs">
    <div>
      <img style="padding-left:0em" src="Icon.png" />
      <div>Item1</div>
    </div>

    <div>
      <img style="padding-left:1em" src="Ico.pngn" />
      <div>Item1</div>
    </div>

    <div>
      <img style="padding-left:2em" src="icon.png" />
      <div>Item1hshksdh fh sdfjhsjkdfhs fsd</div>
    </div>

    <div>
      <img style="padding-left:2em" src="icon.png" />
      <div>Item1</div>
    </div>

  </div>

(请注意,HTML和CSS可以完全更改,我只需要一个表示行将事件挂起的元素)。

CSS并不是我真正的事情,因此请记住这一点!

陪同Afif

fit-content()需要与值一起使用(https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content)。没有它是无效的。

顺便说一下,您不需要它,您可以像下面那样更新代码。我将依靠flexbox使其变得更容易,因为您希望所有元素在同一行中彼此相邻。

.component-body-inputs {
  max-width: 200px;
  display:inline-block; /* to fit the content width OR display:table to keep the block level behavior */
  background-color: yellow;  
  white-space: nowrap;
}


.component-body-inputs>div {
  /*overflow: hidden; not needed here*/
  border-top: solid 1px black;
  display:flex; /* added this */
}

.component-body-inputs>div>img {
  width: 1em;
  height: 1em;
}

.component-body-inputs>div>div {
  /*display: inline-block; not needed*/
  text-overflow: ellipsis; 
  overflow: hidden; /*needed here*/

}

.component-body-inputs>div:hover {
  background-color: lightgray;
}
<div class="component-body-inputs">
    <div>
      <img style="padding-left:0em" src="Icon.png" />
      <div>Item1</div>
    </div>

    <div>
      <img style="padding-left:1em" src="Ico.pngn" />
      <div>Item1</div>
    </div>

    <div>
      <img style="padding-left:2em" src="icon.png" />
      <div>Item1hshksdh fh sdfjhsjkdfhs fsd</div>
    </div>

    <div>
      <img style="padding-left:2em" src="icon.png" />
      <div>Item1</div>
    </div>

  </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS文本溢出属性省略号可以应用于垂直滚动文本吗?

来自分类Dev

使用jQuery检测CSS文本超低省略号

来自分类Dev

CSS3内容和包装div不会自动调整大小

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

如何使用CSS固定宽度和自动调整大小来设置div的样式?

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

flex项目内的CSS省略号

来自分类Dev

带有省略号的CSS文字换行

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

当宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

使用CSS省略号在悬停上显示截断的文本会覆盖其下方的文本

来自分类Dev

CSS“文本溢出:省略号”,并将元素垂直居中

来自分类Dev

CSS-自动调整div的宽度

来自分类Dev

CSS使用文本溢出时可防止DIV换行:省略号

来自分类Dev

带有内联元素的CSS省略号?

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

来自分类Dev

CSS:带有正确附件的省略号应始终可见

来自分类Dev

<div>旁边带有文本和最小宽度的<img>的CSS

来自分类Dev

如何使用CSS固定宽度和自动调整大小来设置div的样式?

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

居中渐变省略号CSS阴影

来自分类Dev

宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

将工具提示添加到具有CSS文本溢出的元素:省略号

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

CSS:自动调整宽度以包装文本内容?

来自分类Dev

CSS 最大宽度文本大小问题

来自分类Dev

css。文本溢出不起作用:省略号

来自分类Dev

自动调整大小的 css

Related 相关文章

  1. 1

    CSS文本溢出属性省略号可以应用于垂直滚动文本吗?

  2. 2

    使用jQuery检测CSS文本超低省略号

  3. 3

    CSS3内容和包装div不会自动调整大小

  4. 4

    CSS文字省略号和100%宽度

  5. 5

    如何使用CSS固定宽度和自动调整大小来设置div的样式?

  6. 6

    CSS文字溢出省略号+以%表示的宽度无效

  7. 7

    flex项目内的CSS省略号

  8. 8

    带有省略号的CSS文字换行

  9. 9

    带省略号的浮动div的CSS-宽度未知

  10. 10

    当宽度设置为百分比时,CSS省略号不起作用

  11. 11

    使用CSS省略号在悬停上显示截断的文本会覆盖其下方的文本

  12. 12

    CSS“文本溢出:省略号”,并将元素垂直居中

  13. 13

    CSS-自动调整div的宽度

  14. 14

    CSS使用文本溢出时可防止DIV换行:省略号

  15. 15

    带有内联元素的CSS省略号?

  16. 16

    CSS文字溢出:省略号不取决于宽度

  17. 17

    如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

  18. 18

    CSS:带有正确附件的省略号应始终可见

  19. 19

    <div>旁边带有文本和最小宽度的<img>的CSS

  20. 20

    如何使用CSS固定宽度和自动调整大小来设置div的样式?

  21. 21

    带省略号的浮动div的CSS-宽度未知

  22. 22

    居中渐变省略号CSS阴影

  23. 23

    宽度设置为百分比时,CSS省略号不起作用

  24. 24

    将工具提示添加到具有CSS文本溢出的元素:省略号

  25. 25

    CSS 文本溢出省略号无法正确显示

  26. 26

    CSS:自动调整宽度以包装文本内容?

  27. 27

    CSS 最大宽度文本大小问题

  28. 28

    css。文本溢出不起作用:省略号

  29. 29

    自动调整大小的 css

热门标签

归档