[英]Text remains wrapped inside it's parent div - CSS, React
The question is pretty straight-forward and I have read lots and lots of posts about the same issue, though in my specific case all these solutions are not working because I am probably handling it wrong or making it over-complicated.这个问题非常简单,我已经阅读了很多关于同一问题的帖子,但在我的具体情况下,所有这些解决方案都不起作用,因为我可能处理错误或使其过于复杂。
Some of the solutions I tried:我尝试过的一些解决方案:
Most of these posts come to the conclusion that you should use inline-block
in combination with white-space: nowrap
.大多数这些帖子得出的结论是,您应该将inline-block
与white-space: nowrap
结合使用white-space: nowrap
。 Though after numerous trial and error tries, I actually kinda forgot what I did and did not try..尽管经过无数次的反复试验,我实际上有点忘记了我所做的并且没有尝试过..
My specific case我的具体情况
I have a React
application in which I want to display an hours-bar
.我有一个React
应用程序,我想在其中显示hours-bar
。 This bar has a (sort-of) table layout
but just with 1 row
.这个栏有一个(排序的) table layout
但只有 1 row
。 The bar consists out of 15 cells ( div's
).条形图由 15 个单元格 ( div's
) 组成。
The problem问题
Each cell should have a specific text above it when a certain condition is met.当满足特定条件时,每个单元格上面都应该有一个特定的文本。 So for example, I want to show a text value on the starting cell div, and the ending cell div and then each 5th cell again.例如,我想在起始单元格 div 和结束单元格 div 上显示文本值,然后再次显示每个第 5 个单元格。 It should look something like this:它应该是这样的:
I figured I could achieve this by making a 'Time' row
inside the body of the time bar, however when I add it as a separate row, then the times / text will never be above the correct cells when the bar has multiple lines on the screen, you would then get something like this:我想我可以通过在时间条的主体内创建一个“时间” row
来实现这一点,但是当我将它作为单独的行添加时,当条上有多行时,时间/文本永远不会高于正确的单元格屏幕,然后你会得到这样的东西:
So my next idea was to make 2 separate div's inside the row where 1 div (the top div) functions as the header and the second div functions as the actual bar:所以我的下一个想法是在行内制作 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>
The above html
get's rendered on each separate cell
(time-step), so with the above example that would be 15 times (8:00 to 11:30 with steps of 15 minutes).上面的html
get 呈现在每个单独的cell
(时间步长)上,因此在上面的示例中将是 15 次(8:00 到 11:30,步长为 15 分钟)。
The objects TimeColumnBody
, TimeColumnHeader
and TimeColumn
are created inside the react file
and they are simple custom div elements
with styling (using styled-components
) :对象TimeColumnBody
、 TimeColumnHeader
和TimeColumn
是在react file
中创建的,它们是带有样式的简单custom div elements
(使用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;
`;
The creating of the entire table / time-bar happens in the React render
part:整个表/时间条的创建发生在React render
部分:
render() {
return (
<TimeContainer>
<TimeRow>
{this.renderTimeTable()}
</TimeRow>
</TimeContainer>
);
}
The renderTimeTable
function is the part where the cells are being created ( TimeColumnBody
, TimeColumnHeader
, TimeColumn
elements). renderTimeTable
函数是创建单元格的部分( TimeColumnBody
、 TimeColumnHeader
、 TimeColumn
元素)。
The text inside the TimeColumnHeader
div remains wrapped inside the div even with the white-space: nowrap;
即使有white-space: nowrap;
, TimeColumnHeader
div 内的文本仍保留在 div 内white-space: nowrap;
property:财产:
I tried adding the white-space: nowrap;
我尝试添加white-space: nowrap;
property to the TimeColumn
div with no effect, then I added the display: inline-block property
with no effect, then I tried adding it to some parent div's
but also without result.属性到TimeColumn
div 没有效果,然后我添加了display: inline-block property
没有效果,然后我尝试将它添加到一些parent div's
但也没有结果。
The entire styling looks (currently) as follows (style added inline for easier reading):整个样式看起来(当前)如下(样式添加内联以便于阅读):
<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>
I am now out of ideas and hope someone has a (better) solution to acheive this.我现在没有想法,希望有人有(更好的)解决方案来实现这一目标。
UPDATE更新
Added a CodePen: https://codepen.io/anon/pen/rqJgRx添加了一个 CodePen: https ://codepen.io/anon/pen/rqJgRx
The problem initially appears to be related to overflow or wrapping, but it is actually a z-index issue - because you are floating .TimeColumnBody
left, each subsequent element has a higher z-index than the last and thus overlaps the previous item.该问题最初似乎与溢出或换行有关,但它实际上是一个 z-index 问题 - 因为您浮动.TimeColumnBody
左侧,每个后续元素的 z-index 都比最后一个更高,因此与前一项重叠。 I was able to fix this simply by adding a span
to the first time with:我能够通过在第一次添加一个span
来解决这个问题:
.TimeColumnHeader span {
position: absolute;
}
See pen: https://codepen.io/anon/pen/NOyZOx见笔: https : //codepen.io/anon/pen/NOyZOx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.