Question

我想在表的列中显示文件的路径，例如

some_random_folder/my_long_filename.txt

这样，当我需要包装它时，它将首先以斜杠包装，然后以下划线包装，例如用“ |”显示列宽：

|some_random_folder/           |
|my_long_filename.txt          |

代替

|some_random_folder/my_long_   |
|filename.txt                  |

当然，如果该列太窄，它仍会在下划线处换行：

|some_random_    |
|folder/         |
|my_long_        |
|filename.txt    |

这也很好：

|some_random_    |
|folder/my_long_ |
|filename.txt    |

我知道我可以添加来建议要包装的地方，但这似乎只有一个优先级。

使用纯CSS可以做到吗？（如果不支持IE / Edge，那就很好。）

Answer 1

这不能完全在CSS中完成，所以我建议为此使用JavaScript函数。

这里是一个使用特殊的html实体进行换行的示例，该断行将在需要时剪切文本。如果不需要换行符，它将不创建可见的空白。

这只是一个在第一个“ /”字符后添加换行符的基本示例，您可以将其与所有可能需要添加更多换行符的其他逻辑进行扩展：

var spans = document.getElementsByClassName("cutme");

for (var i = 0; i < spans.length; i++) {
  var span = spans[i];
  var index = span.innerText.indexOf("/");
  var text = span.innerText;
  span.innerHTML = text.substring(0, index + 1) + "&#8203;" + text.substring(index + 1);
}

table {
  width: 200px;
}

td {
  border-bottom: solid 2px black;
}

<table>
  <tbody>
    <tr>
      <td class="cutme">
        some_random_folder/my_long_filename.txt
      </td>
    </tr>
    <tr>
      <td class="cutme">
        folder/filename.txt
      </td>
    </tr>
    <tr>
      <td class="cutme">
        some_random_folder/my_long_filename.txt
      </td>
    </tr>

  </tbody>
</table>

Answer 2

如果“ some_random_folder /”部分的长度已知，则可以入侵@media all and max-width，以将空白（在下划线后添加为<wbr />的空格）限制在特定窗口宽度以下。在以下示例中，10em可在我的浏览器上运行。（当宽度小于7em时，它甚至会在字符级别进行换行。）我更改颜色以开始换行时显示。

.wrap { white-space:nowrap; font-family:monospace; }

@media all and (max-width:10em) {
.wrap { white-space:normal; color:blue; }
}

@media all and (max-width:7em) {
.wrap { word-break:break-all; word-wrap:break-word; color:red; }
}

<span class="wrap">some_<wbr />random_<wbr />folder/</span><wbr /><span class="wrap">my_<wbr />long_<wbr />filename.txt</span>

在CSS中不同字符上的文本换行中设置优先级

2 个答案: