Question

我在一个Flexbox中有三个div。我希望它们内联显示。但是，如果第一个div中的文本过多，我想截断该文本，以确保始终可以看到第二个div和第二个<div class="flex"> <div class="flex-1 item"> !!!Scale me down If I am too big for the screen!!! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="flex-2 item">Always show me. Dont let flex-1 push me outside</div> <div class="flex-3 item">Always show me. Dont let flex-1 push me outside</div> </div>的文本。

HTML：

.flex {
  display: flex;
}

.item {
  margin: 2px;
  border: 1px solid black;
  height: 2em;
  white-space: nowrap;
}

.flex-1 {
  flex: 1 1 5em;
}

.flex-2 {
  flex: 1 1 5em;
}

.flex-3 {
  flex: 1 1 5em;
}

CSS：

import sys
import csv
import asana

def process_project_tasks(client, project, ws_dict):
    """Add each task for the current project to the records list."""
    task_list = []
    while True:
        tasks = client.tasks.find_by_project(project['id'] 
{"opt_fields":"name, projects, workspace, id, due_on, created_at, 
modified_at, completed, completed_at, assignee, assignee_status, parent, 
notes"})

        for task in tasks:
            ws_name = ws_dict[task['workspace']['id']]
            assignee = task['assignee']['id'] if task['assignee'] is not 
None else ''
            created_at = task['created_at'][0:10] + ' ' + 
task['created_at'][11:16] if \
                    task['created_at'] is not None else None
            modified_at = task['modified_at'][0:10] + ' ' + 
task['modified_at'][11:16] if \
                    task['modified_at'] is not None else None
            completed_at = task['completed_at'][0:10] + ' ' + 
task['completed_at'][11:16] if \
                task['completed_at'] is not None else None
            rec = [task['name'], project['name'], ws_name,task['due_on'], 
created_at, \
                modified_at, task['completed'], completed_at, assignee, \
                task['assignee_status'], task['parent'], task['notes'], 
task['id']]
            rec = ['' if s is None else s for s in rec]
            task_list.append(rec)
        if 'next_page' not in tasks:
            break
    return task_list

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

Answer 1

我建议使用Sass / Scss使用DRY原理。使用mixin

Scss

@mixin trunc-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

在您的课程中

 @for $i from 1 through 3 {
  .flex-#{$i} { 
    @include trunc-text;
      @if $i == 1 {
        flex: 5 1 5rem
      } @else {
        flex: 1 1 5rem;
      }
  }
}

乍一看，这可能会让您感到恐惧，但这确实很强大。

Css

中的输出

.flex-1 {
  flex: 1 1 5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flex-2 {
  flex: 1 1 5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flex-3 {
  flex: 1 1 5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

优先处理flexbox中的框

1 个答案: