Program Club

CSS 텍스트 랩 없음

proclub 2021. 1. 9. 10:24
반응형

CSS 텍스트 랩 없음


아래 인용 된 코드 http://jsbin.com/eveqe3/edit를 참조하십시오 .

텍스트가 지정된 너비로 녹색 상자에만 표시되는 방식으로 항목 div 내부에 텍스트를 표시해야하며 나머지 줄은 숨겨야합니다. 어떤 제안이라도주세요 ...

<style>
  #container{
    width : 220px;
  }
  .item{
    float:left;
    border: 1px solid #0a0;
    width: 100px;
    height: 12px;
    padding 2px;
    margin: 0px 2px;
  }
  .clearfix{
    clear: both;
  }
</style>
</head>
<body>
  <div id="container">
    <div class="item"> A very loooooooooooooooooooooong text </div>
    <div class="item"> Another looooooooooooooooooooong text </div>
    <div class="clearfix">  </div>
   </div>
</body>
</html>​

overflow : hidden에 추가하여

white-space:nowrap;

다음을 사용하십시오.

overflow: hidden;
white-space: nowrap;

항목의 div에서


css 속성 overflow를 사용합니다. 예를 들면 :

  .item{
    width : 100px;
    overflow:hidden;
  }

overflow 속성은 ( hidden , scroll , visible ) .. 같은 많은 값 중 하나를 가질 수 있습니다 . overflow-x 또는 overflow-y를 사용하여 한 방향으로 만 오버플로를 제어 할 수 있습니다 .

나는 호

참조 URL : https://stackoverflow.com/questions/3308365/css-no-text-wrap

반응형