Question

我试图获取第一个“ message-title”的内容，一旦它碰到绿色容器的边缘，就将其截断。相反，它在外面溢出。我认为这可能是Flexbox的怪癖-有人尝试做类似的事情吗？

在帖子底部添加了相关的密码笔。

标记

<div class="container">
  <div class="message">
    <div class="message-content">
      <div class="message-header">
        Header
      </div>
      <div class="message-body">
        <div class="message-body__left">
          AV
        </div>
        <div class="message-body__right">
          <div class="message-main">
            <div class="message-type">

            </div>
            <div class="message-details">
              <div class="message-title">
                Test string Test string Test string Test string Test string Test string Test string Test string
              </div>
              <div class="message-subtitle">
                Blah blah
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message-content">
      <div class="message-header">
        Header
      </div>
      <div class="message-body">
        <div class="message-body__left">
          AV
        </div>
        <div class="message-body__right">
          <div class="message-main">
            <div class="message-type">

            </div>
            <div class="message-details">
              <div class="message-title">
                Test string Test string
              </div>
              <div class="message-subtitle">
                Blah blah
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message-content">
      <div class="message-header">
        Header
      </div>
      <div class="message-body">
        <div class="message-body__left">
          AV
        </div>
        <div class="message-body__right">
          <div class="message-main">
            <div class="message-type">

            </div>
            <div class="message-details">
              <div class="message-title">
                Test string
              </div>
              <div class="message-subtitle">
                Blah blah
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

* {
  min-width: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  max-width: 400px;
  background: red;
}

.message {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-bottom: 2rem;
}

.message-content {
  display: flex;
  flex-direction: column;
  margin-right: 20%;
  max-width: 80%;
  align-items: flex-start;
  background: green;
}

.message-header {
  display: flex;
}

.message-body {
  display: flex;
}

.message-body__left {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 0.5rem;
  background: teal;
  display: none;
}

.message-body__right {
  position: relative;
  background: #eff2f5;
  border-radius: 3px;
  word-wrap: break-word;
  white-space: normal;
}

.message-main {
  display: flex;
}

.message-type {
  position: relative;
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-shrink: 0;
  background: blue;
}

.message-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message-title {
  padding-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-subtitle {
  display: flex;
  justify-content: space-between;
}

此处相关的Codepen-https://codepen.io/anon/pen/VGgQdL

Answer 1

{p> white-space: nowrap选择器中的

.message-title引起了问题。

编辑1。

将display: flex从.message-content中删除是可行的，因为要使overflow: hidden; text-overflow: ellipsis工作，父容器应具有固定的宽度。启用.message-content { display: flex; }不会发生，因为宽度是可变的。

如果您绝对需要在父级上保留display: flex，则可以尝试手动添加固定宽度-.message-title: { max-width: 234px; }或width: 234px。除了在较小的屏幕尺寸时会破裂之外，其他功能均相同。

* {
  min-width: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  max-width: 400px;
  background: red;
}

.message {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-bottom: 2rem;
}

.message-content {
  display: flex;
  flex-direction: column;
  margin-right: 20%;
  max-width: 80%;
  align-items: flex-start;
  background: green;
}

.message-header {
  display: flex;
}

.message-body {
  display: flex;
}

.message-body__left {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 0.5rem;
  background: teal;
  display: none;
}

.message-body__right {
  position: relative;
  background: #eff2f5;
  border-radius: 3px;
  word-wrap: break-word;
  white-space: normal;
}

.message-main {
  display: flex;
}

.message-type {
  position: relative;
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-shrink: 0;
  background: blue;
}

.message-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message-title {
  padding-bottom: 0.25rem;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-subtitle {
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>Cover</title>
</head>
<body>
	<div class="container">
		<div class="message">
			<div class="message-content">
				<div class="message-header">
					Header
				</div>
				<div class="message-body">
					<div class="message-body__left">
						AV
					</div>
					<div class="message-body__right">
						<div class="message-main">
							<div class="message-type">
						
							</div>
							<div class="message-details">
								<div class="message-title">
									Test string Test string Test string Test string Test string Test string Test string Test string
								</div>
								<div class="message-subtitle">
									Blah blah
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="message">
			<div class="message-content">
				<div class="message-header">
					Header
				</div>
				<div class="message-body">
					<div class="message-body__left">
						AV
					</div>
					<div class="message-body__right">
						<div class="message-main">
							<div class="message-type">
						
							</div>
							<div class="message-details">
								<div class="message-title">
									Test string Test string
								</div>
								<div class="message-subtitle">
									Blah blah
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="message">
			<div class="message-content">
				<div class="message-header">
					Header
				</div>
				<div class="message-body">
					<div class="message-body__left">
						AV
					</div>
					<div class="message-body__right">
						<div class="message-main">
							<div class="message-type">
						
							</div>
							<div class="message-details">
								<div class="message-title">
									Test string
								</div>
								<div class="message-subtitle">
									Blah blah
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Answer 2

正如@Viktor所指出的，white-space:nowrap导致了您的问题。

除此之外，我建议您简化布局。 IMO不需要太多的容器，或者至少可以用很少的代码来达到相同的结果。

此外，将事情保持简单可以带来简单的解决方案。例如。由于默认值align-items为stretch，因此不需要做任何特别的事情使蓝框占据所有垂直空间，这意味着子项将占据{{1 }}（在这种情况下为Y）。 cross-axis个父项的子项也会发生这种情况，它们占据所有水平空间。

请参见下面的代码片段（简短起见，省略了供应商前缀）：

flex-direction:column

.container{
  display:flex;
  flex-direction:column;
  box-sizing:border-box; 
  padding:1.5rem; 
  max-width:400px; 
  background:red;
}

.message:not(:last-child){
  margin-bottom:20px;
}

.message{
  display:flex;
  flex-direction:column;
}

.header{
  background:green;
}

.body{
  display:flex;
  flex-direction:row;
}

.type{
  flex-basis:20%;
  background:blue;
}

.subtitle{
  flex-grow:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:lightgray;
}

我已经使用this tool生成了此布局，这是一个玩转，理解和生成<div class="container"> <div class="message"> <div class="header"> Header </div> <div class="body"> <div class="type"></div> <div class="subtitle"> Test string Test string Test string Test string Test string Test string Test string Test string Blah blah </div> </div> </div> <div class="message"> <div class="header"> Header 2 </div> <div class="body"> <div class="type"></div> <div class="subtitle"> Test string2 Test string2 Test string2 Test string2 Test string Test string Test string Test string Blah blah </div> </div> </div> </div>布局的良好起点。

嵌套flexbox容器中的文本溢出

2 个答案: