相关疑难解决方法(0)

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

我正在开发一个显示大量网卡的网络应用程序,其高度本身就是可变的.

为了美学,我们使用jQuery .matchHeight()来平衡每一行中卡片的高度.

它的性能不能很好地扩展,所以今天我一直在迁移到基于灵活盒的解决方案,这个解决方案要快得多.

但是,我丢失了一个行为 - 如果卡片标题不适合,则应使用省略号截断.

目标:

1. 3列
2. 列宽可以填充父级
3. 列之间的间距恒定
4. 高度在一排内均衡

如何安排得到尊重容器大小和text-overflow: ellipsis;和white-space: nowrap;兑现？

(没有jQuery标签,因为我们正在远离那个)

我的解决方案是当前的形式,除了截断之外,它实现了我的所有目标:

https://codepen.io/anon/pen/QvqZYY

#container { 
                display: flex; 
                flex-direction: row; 
                flex-wrap: wrap; 
                
                justify-content: flex-start;    /* Bias cards to stack from left edge       */ 
                align-items: stretch;           /* Within a row, all cards the same height  */ 
                
                border: thin solid gray; 
            } 
            .card-wrapper { 
                width: 33.33%; 
                display: flex; 
                background: #e0e0ff; 
            } 
            .card { 
                flex-grow: 1; 
                margin: 7px; 
                display: flex; 
                flex-direction: column; 
                border: thin …

我正在尝试使用flexbox进行简单的设计,但我遇到了IE11的问题.基本上,我想要一个仅在内容不够高时才能粘在底部的页脚.我这样做对Chrome没有任何问题:

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

只需<p>main</p>使用IE11来查看错误行为的数量即可.

有没有办法在没有JavaScript的情况下实现这一目标？

我有一个div，它是一个包装器，里面有一些孩子div。我正在使用flexbox将它们放置在彼此下方。现在，子 div 有一个文本。文本与 垂直对齐align-items: center;。子 div 的宽度取决于它的文本。当文本与包装器一样长时，div 应该停止增长并且里面的文本应该被剪掉。为此，我尝试使用text-overflow: ellipsis;. 它没有按预期工作。我知道我可以display: inline-block;在 的情况下使用flexbox，但我想使用flexbox来对齐文本，text-overflow: ellipsis;但它似乎不适用于我的示例。目前，长文本项与包装器重叠，也没有省略号。该项目具有固定高度。

我为这个主题找到的唯一答案是这个，但答案对我没有帮助：Ellipsis in flexbox container

希望它足够清楚。

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
  flex-wrap: wrap;
}

.wrapper__item {
  min-width: 0;
  flex-basis: 50%;
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: …

我有一张卡片里面有一堆文字.其中一些是冗长的,它被强制到下一行,像这样,

我希望文本保持在一行,如果需要工具提示,则成为省略号.就像'拒绝了......'等

我已经使用flex和angular-material来设置它.

我尝试过的事情:

设置以下css属性:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

这将使文本不再溢出,但不应用省略号.

这是HTML

<div *ngIf="profile" fxLayout="row" style="justify-content: space-evenly;">
......
 <div fxLayout="column" style="flex-basis: 75%; margin-right: 10px;">
        <mat-card class="card-info" style="flex: 1.5;">
            <div class="mat-card-header-text">Personal Information</div>
            <mat-card-content class="flex-and-justify-between">
                <div fxLayout="column" style="padding: 5px;">
                    <label class="info-heading">Date of Birth</label>
                    <label>{{profile.dateOfBirth | date }}</label>
                    <label class="info-heading info-heading-padded">Sexuality</label>
                    <label>{{profile.sexuality.value}}</label>
                    <label class="info-heading info-heading-padded">Previous Offender</label>
                    <label>{{profile.previousOffender}}</label>
                </div>

                <div fxLayout="column">
                    <label class="info-heading">Gender</label>
                    <label>{{profile.gender}}</label>
                    <label class="info-heading info-heading-padded">Gender Identity</label>
                    <label>{{profile.genderIdentity.value}}</label>
                    <label class="info-heading info-heading-padded">Date of First Visit</label>
                    <label>22/01/2018</label>
                </div>
                <div fxLayout="column">
                    <label class="info-heading">Postcode</label>
                    <label>{{profile.postcode}}</label>
                    <label …

我正在尝试使用flex创建一个布局(将是一个音乐播放器).

我有3个按钮(上一个,上一个,下一个,由红色方块表示),我总是想要在同一条线上.

然后,我想要显示在按钮右侧的一些歌曲信息(当前时间,歌曲标题和总时间).

我总是希望总时间在最右边,并且歌曲标题要填满剩余的宽度(用flex-grow),但是当窗口变小时要用省略号截断.

有没有人知道如何调整它以使其正常工作？

.wrapper {
  display: flex;
  align-items: center;
}
ul {
  display: inline-block;
  list-style: none;
  flex-shrink: 0;
}
li {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: red;
  margin-right: 3px;
}
.song-wrapper {
  background: beige;
  display: flex;
  flex-grow: 1;
}
.song-title {
  background: blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

<div class="wrapper">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="song-wrapper">
    <span>1:23</span>
    <span class="song-title">This is the song title and I want it to ellipsize …

我有一个我为用户显示的元素列表以及一个Icon和两个按钮.到目前为止这么好,但我希望这个列表可以扩展到移动设备并在必要时缩小.

当列表中的文本太长时,它会阻止页面缩小并强制显示水平滚动条.我想要实现的是长描述文本缩小,最后显示3个点(省略号).

容器元素显示为flex,文本容器具有flex-shrink 1,但它仍然拒绝收缩和溢出.

任何人都可以指导我在这里做错了吗？为什么.mdc-list-item拒绝收缩？有没有什么办法可以在必要时用CSS强制缩小它？

.mdc-list-item {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdc-list {
  display: flex;
  flex-direction: column;
}

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
  <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 1
        <span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons …