Question

我正在显示容器中的文件列表。此列表由php脚本生成。

对于每个文件，我关联一个垃圾按钮，以便在用户需要时删除该文件。为此，我在浮动按钮上将浮动设置为向右。

但是在某些文件名太长的情况下，由于溢出，按钮不会显示在同一行....任何想法如何解决？

这是生成脚本：

$list_docs = '<ul class="listDocs">';
foreach ($iterator as $file) {

    // ignore filenames starting with . dot.
    if (substr($file->getBasename(), 0, 1) === '.') {
        continue;
    }

    $entryId++; // unique list entry id...

    // use this and $prevDepth to check for nesting into and out of directories...
    $curDepth = $iterator->getDepth();

    $dirStart = $curDepth > $prevDepth; // nest down a directory?

    $dirEnd   = $curDepth < $prevDepth; // end of the directory
    if ($dirEnd) { // UL end...
        $list_docs .= '<!-- dir-end --></ul>';
    }

    if ($file->isDir()) { // display path details...
        if ($dirStart) { //  UL start... with Directory so will nest...
            $list_docs .= '<ul class="listDocs indent">';
        }

        // display directory details
        $list_docs .= '<li class="docResult"><i class="fa fa-folder"></i>&nbsp;<span id="file_'. $entryId. ' data-folder="'.$file->getPathname().'" class="folderClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';

     } else {

        if ($dirStart) { // UL start... first time for this directory...
            $list_docs .= '<ul class="listDocs indent">';
        }

        // display file details
        $list_docs .= '<li class="docResult"><i class="fa fa-file-o"></i>&nbsp;<span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span><span class="file-remove fa fa-trash-o"></span></li>';
    }
    $prevDepth = $curDepth; // record depth so we can check next time...
}
$list_docs .= '</ul>';

此代码粘贴到div：

<div class="documentList" id="documentList">Explorer</div>

这是css：

.file-remove {
  float: right;
  color: #700;
  cursor: pointer;
}

.documentList{
  display: inline-block;
  background-color: rgba(255,255,255,1);
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0,0,0,0.3);
  color: rgba(116,119,123,1);
  padding: 0.5em 0.5em;
  width: 20%;
  min-height: 500px;
  vertical-align: top;
}


.listDocs{
  list-style: none;
  text-align: left;
  padding: 0em 0em;
  margin: 0em 0em;
  overflow: auto;
}

我还尝试将其显示为表格，但我没有设法获得文件名列的正确宽度。

编辑：这是问题的图片：

我也尝试过自动换行：break-word;在docResult类上，我得到以下内容：

Answer 1

我可能会更改内联元素：

<li class="docResult">
    <i class="fa fa-file-o"></i>
    <span id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</span>
    <span class="file-remove fa fa-trash-o"></span>
</li>

分为：

<li class="docResult">
    <div class="file"><i class="fa fa-file-o"></i></div>
    <div class="title" id="file_'. $entryId .'" data-file="'.$file->getPathname().'" class="fileClic">'.$file->getFilename().'</div>
    <div class="file-remove"><i class="fa fa-trash-o"></i></div>
</li>

通过这种方式，我们可以将它们显示为＆＃34; inline-block＆＃34;，并使长文件标题垂直增长而不会中断任何一侧的图标。

然后，我们可以：

.docResult{
    font-size: 0; /* Remove children spacing */
}

.docResult div{
    display: inline-block; /* Allows for horizontal positioning of siblings */
    vertical-align: top; /* They will stick to the top, even if a long title expands the row */
    font-size: inital; /* Resets font-size from parent's 0px */
}

.docResult .file{
    width: 50px; /* Example icon width */
}

.docResult .file-removed{
    width: 50px;
}

.docResult .title{
    width: calc(100% - 50px - 50px); /* We want the title to be as long as it can be without overlapping icons */
}

所以，基本上我们使用块元素而不是内联元素，这样元素就不会像文本那样彼此包裹。之后，我们正在定义我们希望每个元素水平放置，使两个图标与标题的第一行对齐，并尽可能地使标题元素尽可能不妨碍任何一个图标。< / p>

在前一个容器

1 个答案: