Increase in the number of units without transfer



  • How can a browser window be reduced, the text block is not moved to another row but increased at height without changing its position?

    http://jsfiddle.net/u8bdrL3s/1/

    HTML:

    <div class="a">
      <div class="b">
        <div class="c">
        </div>
      </div>
      <div class="d">
        Текст Текст Текст Текст Текст Текст Текст Текст Текст
      </div>
    </div>
    

    CSS:

    .a {
      line-height: 30px;
      border: 1px solid #eee;
      font-weight: bold;
      height: 30px;
    }
    .b {
      display: inline-block;
      background-color: blue;
    }
    .c {
      display: inline-block;
      cursor: pointer;
      height: 25px;
      width: 25px;
      background-image: url("//habracdn.net/habr/images/1448626657/logo.svg?r=2");
      background-repeat: no-repeat;
      vertical-align: middle;
    }
    .d {
      display: inline-block;
      background-color: red;
    }
    


  • http://jsfiddle.net/u8bdrL3s/2/

    .a { white-space: nowrap; }
    .d { white-space: normal; }
    

Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2