防止其他div内的2个div的换行符

Question

想要实现这样的事情:

|--- parent-div ------------------------|
||----- child-div-1 -------||----- child-div-2 -------|
|---------------------------------------|

实际上看起来像是这样的:

|--- parent-div ------------------------|
||----- child-div-1 -------||----- chi..|
|---------------------------------------|

想象一下,您有一个输入字段,相对于网站名称显示用户的域名,例如 http://www.domain-name.com/**username**

• 父div必须保持固定大小,例如200px;
• 子div 1和2彼此相邻

现在发生的事情是Child Div 2跳到下一行:

|--- parent-div ------------------------|
||----- child-div-1 -------|            |
||----- child-div-2 ----------|         |
|---------------------------------------|

Answer 1

为达到这个:

|--- parent-div ------------------------|
||----- child-div-1 -------||----- child-div-2 -------|
|---------------------------------------|

• white-space: nowrap在父母身上使用以允许其孩子从中冲出来

• 给孩子们 display: inline-block

• 您可以使用以下内容在长网址上显示省略号:text-overflow:ellipsis和overflow: hidden

例

此示例滚动溢出.要隐藏它,请放在overflow-x: hidden父级上.要显示它,请删除溢出属性.

.parent {
  width: 200px;
  border: solid 1px #000;
  padding: 10px;
  white-space: nowrap;
  overflow: auto;
}
.child {
  width: 150px;
  height: 100px;
  border: solid 1px #000;
  display: inline-block;
  vertical-align: top;
  text-overflow:ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="child">
      <a>http://www.example.com/this-is-really-long/</a>
  </div>
  <div class="child">
      <a>http://www.example.com/this-is-really-long/</a>
  </div>
</div>