긴 줄을 다시 줄이고 짧은 줄로 바꾸기

-2

사용자가 임의의 설명을 입력 할 수있는 페이지를 만들고 아래에 설명을 표시해야합니다. (아래 그림 참조) 내가 가진 문제는 모든 상자를 페이지 내에 넣고 싶다는 것입니다. 내가 테스트하는 동안 나는 <span> 각 출력이 순간 등,긴 줄을 다시 줄이고 짧은 줄로 바꾸기

을 예를 들어, 긴 문자열은 새로운 라인으로 이동해야하며, 짧은 문자열로 대체 될 수있다. 도움이 될 것입니다!

출처

2016-10-03 MattDewy

일부 HTML 및 CSS를 게시 할 수 있습니까? – gargantuan

배열은 어디에 있습니까? –

"가장 긴 배열"은 무엇을해야합니까? – j08691

white-space: nowrap;을 사용할 수 있습니다.

데모 :

div { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    margin: 5px; 
 
    padding: 5px 10px; 
 
    border-radius: 3px; 
 
    border: 1px solid #333; 
 
}

<div> 
 
    Content goes here. 
 
</div> 
 
<div> 
 
    Content goes here. 
 
</div> 
 
<div> 
 
    Content goes here. Content goes here. Content goes here. 
 
</div> 
 
<div> 
 
    Content goes here. 
 
</div>

지금까지 재 주문 격차를 채우기 위해 요소를, 당신은 자바 스크립트를 필요로 할 수있다.

출처

2016-10-03 15:13:41 hungerstar

정말 고마워요! 다시 약간의 부분을 들여다 볼 것입니다 – MattDewy

-1

display 조건을 사용하여 CSS, simpy로이 작업을 수행 할 수 있습니다. 당신이 모든 요소 대신 전체 라인을하려는 경우

.classname {display:inline-block;}

또한 block을 사용할 수 있습니다.

.classname {display:block;}

출처

2016-10-03 15:11:26

OP는 텍스트 문자열이 줄 바꿈에 리플 로우되지 않도록합니다. 그들은 모두 또는 아무것도 원하지 않는다. 한 단어가 감싸지면 전체 문자열을 감 쌉니다. 이 대답은 이것을하지 않습니다. – hungerstar

-1

난 당신이 각각 디스플레이로 의견을 유지 DIV 수 있도록해야한다고 생각 : 100 % : 설정 한 후 블록하고 맥시 폭입니다. 나는 그것이 잘 작동해야한다고 생각합니다. 참고 : 이것은 주석 이었지만 작성할 수는 없습니다 이렇게하면 텍스트에 충분한 공간이 생기고 텍스트가 div를 초과하면 새 줄이 나타납니다.

출처

2016-10-03 15:15:28

이것이 확실한가요? 테스트 해 봤니? 나는 그것이 OP가 필요로하는 것을 할 것이라고 생각하지 않는다. – hungerstar

@hungerstar, u는 OP가 아니며 아래로 투표하는 것이 최선의 방법은 아닙니다. 내 대답은 내가 OP가 요구하고있는 것에 대한 해결책이다. 이미지를 확인 했습니까? –

예, 이미지를 보았습니다. OP는 긴 텍스트를 짧은 텍스트로 채우는 간격과 함께 다음 줄로 넘어가거나 감싸는 데 긴 텍스트가 필요합니다. [이것은 귀하의 솔루션이하는 것입니다] (https://jsfiddle.net/z6hdqrq1/1/) 및 [투표 다운 기준] (http://stackoverflow.com/help/privileges/vote-down)을 충족합니다. 추신 : 나는 투표하지 않았다. – hungerstar

긴 줄을 다시 줄이고 짧은 줄로 바꾸기

답변

관련 문제