javascript - 文本仍然包裹在它的父 div 中 - CSS，React

Question

这个问题非常直截了当，我已经阅读了很多关于同一问题的帖子，但在我的具体情况下，所有这些解决方案都不起作用，因为我可能处理错误或使它过于复杂。

我尝试过的一些解决方案:

• Why is this CSS nowrap not working?
• Let text go through a div
• CSS white-space nowrap not working
• Don’t wrap span elements

大多数这些帖子得出的结论是，您应该结合使用 inline-block 和 white-space: nowrap。虽然经过无数次的尝试和错误尝试，我实际上有点忘记我做了什么和没有尝试..

我的具体案例

我有一个 React 应用程序，我想在其中显示一个 hours-bar。此栏具有(某种)表格布局，但只有 1 个行。该栏由 15 个单元格(div's)组成。

问题

当满足特定条件时，每个单元格上方应有特定文本。因此，例如，我想在起始单元格 div 和结束单元格 div 上显示一个文本值，然后再次显示每个第 5 个单元格。它应该看起来像这样:

我想我可以通过在时间栏的主体内制作一个“时间”行来实现这一点，但是当我将它添加为单独的行时，时间/文本永远不会在上面当栏在屏幕上有多行时正确的单元格，你会得到这样的东西:

所以我的下一个想法是在行内制作 2 个单独的 div，其中 1 个 div(顶部 div)用作标题，第二个 div 用作实际栏:

<TimeColumnBody>        
    <TimeColumnHeader>
        {(() => {
            if (item.showtime === true)
            {
                return <Test>{item.name}</Test>
            }
        })()}
    </TimeColumnHeader>
    <TimeColumn
        key={item.key} 
        name={item.name}
    >
    </TimeColumn>
</TimeColumnBody>

上面的 html get 在每个单独的 cell(时间步长)上呈现，所以对于上面的例子，这将是 15 次(8:00 到 11:30以 15 分钟为步长)。

TimeColumnBody、TimeColumnHeader 和 TimeColumn 对象是在 react 文件 中创建的，它们很简单 带有样式的自定义 div 元素(使用 styled-components):

const TimeColumnBody = styled.div`
    float: left;
    width: 100%;
    height: 100%;
    @media only screen and (min-width: 768px) {
        width: ${props => (props.span ? props.span / 44 * 100 : "2.27")}%;
        height: 100%;
    }
`;

const TimeColumnHeader = styled.div`
    display: flex;
    align-items: flex-end;
    height: 50%;
    background-color: blue;
    color: white;
    white-space: nowrap;
`;

const TimeColumn = styled.div`
    height: 50%;
    background-color: red;
`;

整个表格/时间栏的创建发生在 React render 部分:

render() {
        return (
                <TimeContainer>
                    <TimeRow>
                        {this.renderTimeTable()}
                    </TimeRow>
                </TimeContainer>
        );      
    }

renderTimeTable 函数是创建单元格的部分(TimeColumnBody、TimeColumnHeader、TimeColumn 元素).

即使使用 white-space: nowrap; 属性，TimeColumnHeader div 中的文本仍然包裹在 div 中:

我尝试将 white-space: nowrap; 属性添加到 TimeColumn div 但没有效果，然后我添加了 display: inline-block 属性 没有效果，然后我尝试将它添加到一些 parent div's 但也没有结果。

整个样式看起来(当前)如下(内联添加样式以便于阅读):

<div class="App" style="text-align: center; height: 100%; overflow: auto;">
    <div class="Nav-LeftPane" style="width: 15%; height: 100%; position: fixed; box-sizing: border-box; overflow-y: auto; float: left;">...</div>
    <div class="content" style="width: 85%; height: 100%; text-align: center; overflow: hidden; float: right;">
        <div class="content-timebar" style="padding-left: 1%; padding-right: 1%; padding-top: 3%; height: 100%;">
            <!-- The actual Time Bar : --> 
            <div class="TimeContainer" style="width: 100%; height: 10%;">
                <div class="TimeRow" style="height: 100%;"> <!-- This div also has some :after logic: .TimeRow::after { content: ""; clear: both; display: table; } -->
                    <!-- the cell part which gets generated 15 times -->
                    <div class="TimeColumnBody" style="width: 2.222%; height: 100%; float: left;">
                        <div class="TimeColumnHeader" style="display: flex; align-items: flex-end; height: 50%; background-color: blue; color: white; white-space: nowrap;">
                            08:00
                        </div>
                        <div class="TimeColumn" style="height: 50%; background-color: red;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

我现在没有想法，希望有人有(更好的)解决方案来实现这一目标。

更新

添加了一个 CodePen: https://codepen.io/anon/pen/rqJgRx

Answer 1

该问题最初似乎与溢出或环绕有关，但它实际上是一个 z-index 问题 - 因为您向左浮动 .TimeColumnBody，每个后续元素的 z-index 都高于最后一项因此与前一项重叠。我能够简单地通过在第一次添加一个 span 来解决这个问题:

.TimeColumnHeader span {
   position: absolute;
}

见笔:https://codepen.io/anon/pen/NOyZOx