HTML + CSS : div 내용을 한 줄에 유지하는 방법은 무엇입니까?

HTML + CSS : div 내용을 한 줄에 유지하는 방법은 무엇입니까?

---

div정의 된 with 안에 긴 텍스트가 있습니다width .

HTML :

<div>Stack Overflow is the BEST !!!</div>

CSS :

div {
    border: 1px solid black;
    width: 70px;
}

문자열을 한 줄로 유지하려면 어떻게해야합니까 (즉, "오버플로"중간에 잘 리도록)?

을 사용하려고 시도했지만 overflow: hidden도움이되지 않았습니다.

---

이 시도:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

---

사용 white-space:nowrap및overflow:hidden

http://jsfiddle.net/NXchy/8/

---

당신의 CSS 사용에서 white-space:nowrap;

---

HTML 코드 : <div>Stack Overflow is the BEST !!!</div>

CSS :

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

이제 결과는 다음과 같아야합니다.

스택 오버플로 ...

---

모두가 이것에 뛰어 들었다! !! 나도 바이올린을 만들었습니다.

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar는 white-space:nowrap먼저 지적해야 할 점을 얻습니다 .

여기에 몇 가지 사항이 있습니다 overflow: hidden. 추가 문자가 레이아웃에 튀어 나오고 싶지 않다면 필요 합니다.

또한 언급 한 바와 같이 공백을 축소하지는 않지만 의도하지는 않습니다 white-space: pre(EnderMB 참조) .prewhite-space: nowrap

---

이것을 div에 추가하십시오

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

---

이것을 시도하십시오. 나는 이것이 비슷하게 실행되기를 원 하지만 어느 것이나 잘 작동 한다고 가정 pre하기보다는 오히려 사용 합니다.nowrap<pre>

div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}

http://jsfiddle.net/NXchy/11/

---

나는 똑같은 것을 찾아 여기로 뛰어 들었지만 아무도 나를 위해 일하지 않았다.

수행하는 작업에 관계없이 시스템 (Oracle Designer : Oracle 11g-PL / SQL)에 따라 div가 항상 다음 줄로 이동하므로 span 태그를 대신 사용해야합니다.

이것은 나를 위해 놀라운 일을했다.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

---

텍스트를 수용하기 위해 블록이 커지지 않도록 높이를 설정하고 overflow: hidden매개 변수를 유지하십시오

편집 : 다음은 두 줄을 높이 표시 해야하는 경우에 대한 예입니다.

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}

---

div {
    display: flex;
    flex-direction: row; 
}

나를 위해 일한 솔루션이었습니다. 경우에 따라 div-lists가 필요합니다.

어떤 대안적인 방향 값은 row-reverse, column, column-reverse, unset, initial, inherit당신이 기대하는 일을하는 것입니다.

참고 URL : https://stackoverflow.com/questions/5232310/htmlcss-how-to-force-div-contents-to-stay-in-one-line