将行与css或html绑定在一起。

Question

我希望两行被捆绑在一起，无论观看设备的宽度。

原因是line2总是解释line1等，它们必须被响应地绑定，这意味着如果屏幕的宽度发生变化，它们仍然必须被绑定。

也可以通过单词绑定，这意味着第一行和第二行词总是在对方下面(以这两个词中最长的宽度为中心)。

更新

有css/html的解决方案吗？

​

#container div:nth-child(odd){
    background-color: gray;color:white;
}

<div id="container">
<div>This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.</div>
<div>This line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter what</div>
<div>This line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main content.</div>
<div>This line is bound and explains content of line 1.This line is bound and explains content of line 1.This line is bound and explains content of line 1.</div>
  
  </div>

​

为了说明这一点:当您运行上述代码段时。第1行以相邻的两行呈现。

我希望它始终是Div1的1行，Div2的下一行。

所以应该是这样的：

​

This is my text, it tells a story about a cat which was 
这是我的文字，它讲述了一个故事一只猫是什么哪
always angry and attacked even humans. One day the cat 
总是生气，甚至攻击人类。有一天，猫

​

第一行是英文文本，下一行永远是翻译文本。这是很难使这种反应，因为宽度的线条变化。

有没有办法

Answer 1

我相信这就是你想要的。

在容器上悬停以看到它更改宽度。

有几个技巧，但主要的想法是使两个元素并排浮动，增加线宽，然后通过转换使它们重叠。

由于每个div只占用容器宽度的一半，所以将容器设置为宽度200%以恢复表观宽度。

​

#container {
  width: 200%;
  transition: width 15s;
}

#container:hover {
  width: 100%;  
}

#container div:nth-child(odd){
  background-color: gray;
  color:white;
  position: relative;
  float: left;
  clear: both;
  margin-right: -50%;
  margin-top: 1em;
  padding-bottom: 1em;
}

#container div:nth-child(even){
  position: relative;
  top: 2.1em;
  float: right;
  transform: translateX(-100%);
}

#container div {
  line-height: 2.2em;  
  width: 50%;
}

<div id="container">
<div>This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.</div>
<div>This line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter what</div>
<div>This line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main content.</div>
<div>This line is bound and explains content of line 2.This line is bound and explains content of line 1.This line is bound and explains content of line 1.</div>
  
  </div>

​

Answer 2

一旦文本超过其父容器的100%宽度，它将默认将文本包装到一个新行，因此它仍然是可见的。这就是导致问题的原因(更改下面绑定文本行的对齐方式)。这里有一个可能的工作，在其中我已经重组了您的HTML，并添加了一些CSS，这可能是一个起点，以帮助您实现您想要的。

​

.no-wrap {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

<div id="container">
  <div class="no-wrap">
    This is line 1 text, we assume responsiveness<br>
    This line is bound to line1 no matter what
  </div>
  <div class="no-wrap">This line is the main content<br>
    This line is bound and explains content of line 1
  </div>
</div>

​

Answer 3

您可以使用span标记使其看起来像您希望的那样：

​

<span>This is my text, it tells a story about a cat which was</span> 
<span>这是我的文字，它讲述了一个故事一只猫是什么哪</span>
<span>always angry and attacked even humans. One day the cat</span> 
<span>总是生气，甚至攻击人类。有一天，猫</span>

​

这看起来就像你想要的那样。这主要是因为你说你想让它看上去。