Скрыть частично скрытый элемент с помощью CSS

Дано:

<div class='row'>
  <div class='c1'>hello</div>
  <div class='c2'>bob</div>
</div>

<div class='row'>
  <div class='c1'>this is a very long test test bc a</div>
  <div class='c2'>bob</div>
</div>


<div class='row'>
  <div class='c1'>this is a very long test test test test test</div>
  <div class='c2'>bob</div>
</div>

CSS

.row .c1 {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  z-index: 1;
  background-color: red;
}

.row .c2 {
  float: right;
  background-color: green;
}

.row {
  width: 200px;
  position: relative;
}

.row:after {
  clear: both;
  content: "";
  display: table;
}

Pen:

http://codepen.io/SamSaffron/pen/JtDHb

Есть ли какая-то фантазия CSS (или структура HTML5), которая может заставить c2 скрыть себя, как только текст в c1 начнет перекрываться?

Запрет на то, что является лучшим исполняемым JavaScript для этого?

Ответы

Ответ 1

EDIT2: Изменен механизм сокрытия до visibility:hidden, как указано в комментариях.

Здесь используется решение с использованием jQuery. Я также работаю над чистым решением JS. Эта же логика должна применяться.

CodePen на основе вашего.

В принципе, если ширина c1 плюс c2 больше ширины row, скройте c2. Я добавил overflow:hidden в CSS для c2 и использовал .width(0), чтобы скрыть его, так как ваш c1 имеет position:absolute и поэтому зависит от c2, чтобы обеспечить высоту строки.дел >

Надеюсь, что вам нужно.

EDIT: Здесь же решение в чистом JavaScript. Это предполагает, что каждый row имеет a c1 и a c2.

CodePen

Ответ 2

да, вы можете попробовать использовать тот же HTML-код, который у вас есть, только с этим CSS:

.row .c1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 170px;
    max-width: 170px;
    z-index: 1;
    background-color: red;
    display:table-cell;
    padding: 0px 5px;
}
.row .c2 {
    position:absolute;
    top:0;
    right:-15px
    /* half of the width */
    ;
    background-color: green;
    display:table-cell;
    width:30px;
}
.row {
    display:table;
    width: 200px;
    position: relative;
}

Смотрите здесь скрипку

Ответ 3

Я использовал jquery для решения этой проблемы...

$('.row').each(function(){
    if($(this).find('.c1').width()+$(this).find('.c2').width()>$(this).width())
    {
        $(this).find('.c2').css({display:'none'});
        $(this).find('.c1').css({position:'relative'});
    }
  });

== > , это автоматически примет вашу ширину .row, ширину .c2 шириной .c1, так как содержимое может меняться

jsfiddle