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 
 
总是生气，甚至攻击人类。有一天，猫

첫 번째 줄은 영어 텍스트이며, 다음 줄은 항상 번역 된 텍스트되어야한다. 라인의 너비가 다양하기 때문에 응답 성을 높이기가 어렵습니다.

텍스트는 더 이상 부모 컨테이너의 100 % 너비보다 일단은 볼이 유지되도록

Answer 1

나는 이것이 당신이 원하는 것이라고 생각합니다.

너비를 변경하려면 컨테이너에 둡니다.

몇 가지 트릭이 있지만 주요 아이디어는 두 요소를 나란히 배치하고 선폭을 늘린 다음 변형을 적용하여 겹치게 만드는 것입니다.

모든 사업부가 컨테이너의 절반 폭을 소요하기 때문에, 이것은 사물의 다양한 의미 할 수

#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

, 그것은 기본적으로 새로운 라인에 텍스트를 포장하는 방법에게 있습니다. 이것은 문제를 일으키는 원인입니다 (아래에있는 텍스트의 바운드 줄 맞춤을 변경 함). 내가 HTML을 재구성하고 원하는 것을 달성하는 데 도움이 될 수있는 몇 가지 CSS를 추가 한 가능한 해결 방법이 있습니다. 이 정확히 보이게처럼

<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>

것 같습니다 : 당신이 원하는 것처럼

.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 태그를 사용할 수 있습니다 당신이 그것을 원하는 방법. 이것은 주로 당신이 당신이 그것을보고 싶다고 말했기 때문입니다.

Answer 4

의미 론적으로 연결되어 있으며 HTML로 그룹화되어야합니다.

이 작업을 적절하게 수행하려면 오버 플로우 (뷰포트보다 큰 너비의 스크롤 가능한 텍스트)로 끝나거나 뷰포트 너비의 상대 글꼴 크기 (예 : vw (https://css-tricks.com/viewport-sized-typography/))를 사용하고 "수동으로"이 작업을 수행하십시오. 최대 라인 길이