html - 图片标题和列表的CSS溢出问题(CSS Overflow problems with picture header and list)

Question

Is this possible using css...I also tried the use of absolute and relative... but it only works with left:0 and right: 0... but the height bottom and top is almost like 0... it doesn't take any value or scalable...

(是否可以使用CSS ...我也尝试使用绝对和相对...但它仅适用于left：0和right：0 ...但高度bottom和top几乎像0 ...没有任何价值或可扩展性...)

while doing some test and experimenting in inspect element...( i forgot what i do...cant recreate ) i was able to do some ellipses but with the use of 100% width which is still not the result im looking for because it included the left part or the picture part of the code in equating the width... it result in .../ellipses but it is still overflow... need help please.

(在检查元素时进行一些测试和实验...（我忘记了我所做的...无法重新创建）我能够做一些椭圆形，但是使用100％的宽度，这仍然不是我正在寻找的结果，因为它在等于宽度时包括代码的左侧部分或图片部分...导致... /椭圆，但仍然溢出...请帮助。)

Thank you in advance

(先感谢您)

<!--
    I Want Responsive :(
    Overall Box is 330px
    So The Header and Items must be around 280
    Picture is 50px only
    Items must be scalable in height... it can be more like e.g 20items

    PROBLEM
----------------------------
| Pic | Header             |
| tu  | ------------------ |
| re  | Item 1             |
|     | Item 2             |
|     | Item 3333333333333333333333333 | <- Overflow
|     | Item 4             |
|     | Item 5             |
----------------------------

    EXPECTED RESULT
----------------------------
| Pic | Header             |
| tu  | ------------------ |
| re  | Item 1             |
|     | Item 2             |
|     | Item 3333333333... | <- TextOverflow
|     | Item 4             |
|     | Item 5             |
----------------------------
-->

https://jsfiddle.net/uv98zgbk/

(https://jsfiddle.net/uv98zgbk/)

is this possible?

(这可能吗？)

if possible is i rather avoid the use of calc in css like 100% - 50px...ocd problems

(如果可能的话我宁愿避免在CSS中使用calc，例如100％-50px ... ocd问题)

  ask by user3492648 translate from so

Answer 1

Would something like this work?

(这样的事情行吗？)

Setting the overflow on the anchor tags instead?

(而是在锚标签上设置溢出？)

 .container { max-width: 300px; height: 300px; display: flex; overflow:hidden; } div { border: 1px solid black; } .list { flex-grow: 2; max-width:100%; } .list-container { max-width: 50%; display: flex; flex-direction: column; } a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

 <div class="container"> <div class="picture"> Picture </div> <div class="list"> Header <div class='list-container'> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</a> <a href="#">Item 4</a> <a href="#">Item 5</a> </div> </div> </div>