使flexbox元素居中和右对齐，并带有text-oveflow并在左侧留出空白空间 [英] Center and right align flexbox elements with text-oveflow and taking empty space on left side

问题描述

@ michael-benjamin

A 是主要居中对象，而 BBBBBBBBBBBBBBB 是正确的对象.

这很好，直到 A 会增长:

我想要什么?

是否可以使用flex/grid/table-tr-td/其他任何CSS技巧?

我尝试了什么?

1. CSS定位属性-增长到 B
时无法停止
2. Flex自动保证金&不可见的Flex项(DOM元素)-不可见的项在左侧不留空白空间
3. CSS网格布局- 1fr 左侧不留空白

解决方案

CSS网格可以像下面这样:

  .container {边距:10px;显示:网格；网格模板列:1fr minmax(0，max-content)1fr;颜色:#fff;}.container ::之前{内容:"";}.b {左边距:自动；背景:灰色；}.一种 {保证金:自动；背景:蓝色；溢出:隐藏文字溢出:省略号；最大宽度:100％;}身体 {背景:线性渐变(红色，红色)中心/2px 100％不重复；}  

 < div class ="container">< div class ="a"&AA;</div>< div class ="b"&BB; BBBBBBBBBBBBBBBB</div></div>< div class ="container">< div class ="a"&AA;</div>< div class ="b"&BB; BBBBBBBBBBBBBBBB</div></div>< div class ="container">< div class ="a"" AAAAAAAAAAAAAA</div>< div class ="b"&BB; BBBBBBBBBBBBBBBB</div></div>< div class ="container">< div class ="a"" AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>< div class ="b"&BB; BBBBBBBBBBBBBBBB</div></div>< div class ="container">< div class ="a"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/AAA< div class ="b"&BB; BBBBBBBBBBBBBBBB</div></div>  

@michael-benjamin Center and right align flexbox elements almost what I want, but with 2 differences:

1. Div have to take empty space at left side too (when it be wide)
2. Div have to collapse text when there is no empty space around at all.

What I have?

A is main centered object and BBBBBBBBBBBBBBB is right object.

This is fine till A will grow:

What I want?

Is it possible to do with flex/grid/table-tr-td/any other css tricks?

What I tried?

1. CSS Positioning Properties - can't stop when grow to B
2. Flex Auto Margins & Invisible Flex Item (DOM element) - invisible item don't give empty space at left side
3. CSS Grid Layout - 1fr don't give empty space at left side

解决方案

CSS grid can do it like below:

.container {
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr minmax(0,max-content) 1fr;
  color: #fff;
}
.container::before {
  content:"";
}

.b {
  margin-left: auto;
  background: grey;
}

.a {
  margin: auto;
  background: blue;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}



body {
  background:linear-gradient(red,red) center/ 2px 100% no-repeat;
}

<div class="container">
  <div class="a">AA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

<div class="container">
  <div class="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="b">BBBBBBBBBBBBBBBB</div>
</div>

这篇关于使flexbox元素居中和右对齐，并带有text-oveflow并在左侧留出空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！