어떻게 하면 HTML과 CSS로 div 콘텐츠를 한 줄로 유지할 수 있습니까?

어떻게 하면 HTML과 CSS로 div 콘텐츠를 한 줄로 유지할 수 있습니까?

다음이 정의된 a 안에 긴 텍스트가 있습니다.

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

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

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

내가 만지작거렸어요.

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

로바카는 지적했습니다.white-space:nowrap.

여기에 몇 가지가 있습니다: 당신은 당신이 필요합니다.overflow: hidden추가 캐릭터가 레이아웃에 튀어나오는 것을 보고 싶지 않은 경우.

또한, 말씀하신 것처럼, 당신은white-space: pre(EnderMB 참조).pre하얀 공간이 무너지지 않을 것입니다.white-space: nowrap할 것이다.

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

제게 도움이 된 해결책이었죠경우에 따라서는div-리스트, 이것이 필요합니다.

일부 대체 방향 값은row-reverse,column,column-reverse,unset,initial,그리고.inherit. 당신이 그들에게 기대하는 것들이 무엇입니까?

이것을 당신의 디브에 추가합니다.

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), divs는 항상 다음 줄로 이동하므로 대신 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>

추가해야 할 범위:{ display: block; }

span {
  width: 70px;
  border: 1px solid black;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

<span>Stack Overflow is the BEST!!!</sapn>

블록이 텍스트를 수용할 수 없도록 높이를 설정하고 유지합니다.overflow: hidden매개 변수.

다음은 두 줄 높이를 표시해야 할 경우의 예입니다.

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

언급URL : https://stackoverflow.com/questions/5232310/how-can-i-force-div-contents-to-stay-in-one-line-with-html-and-css