показать содержимое на основе ширины родителя с css

Question

Возможно ли показать определенный контент с помощью css на основе ширины родительского div? Я думал что-то вроде медиа-запросов, но я не хочу, чтобы ширина всего устройства была равна ширине родительского div.

Я могу сделать это с помощью jQuery see fiddle (измените < на>, чтобы увидеть другой контент), но задавался вопросом, был ли способ сделать что-то подобное с css3?

 <div id="parent"> 
      <div id="content"> 
      <table> 
       <tbody> 
        <tr><td><span class="full">BAHRAIN</span><span class="abbrev">BHR</span></td></tr> 
        <tr><td><span class="full">BELGIUM</span><span class="abbrev">BEL</span></td></tr> 
        <tr><td><span class="full">EGYPT</span><span class="abbrev">EGY</span></td></tr> 
        <tr><td><span class="full">LITHUANIA</span><span class="abbrev">LTU</span></td></tr> 
        <tr><td><span class="full">SWEDEN</span><span class="abbrev">SWE</span></td></tr> 
       </tbody> 
       </table> 
      </div> 
     </div> 

     <script> 
     var w = $('#parent').width(); 
     console.log('width: ', w); 
     if (w<200) 
     { 
     $("#content").addClass("showsmall"); 
     } 
     </script> 

     <style> 
     #parent {width: 300px;} 
     .abbrev {display:none;} 
     .showsmall .abbrev {display:block;} 
     .showsmall .full {display:none;} 
     </style> 

Answer 1

Ваш .width никогда не будет принимать IF, потому что вы установили width в CSS для 200px

Если вы хотите увидеть его динамический вы Шоуде:

• Заменить width на max-width в CSS
• Добавить .resize события

код:

$(window).resize(function() { 
    var w = $('#parent').width(); 
    console.log('width: ', w); 
    if (w < 200) { 
     $("#content").addClass("showsmall"); 
    } else { 
     $("#content").removeClass("showsmall"); 
    } 
}); 

jsFiddle example

Answer 2

Это то, что вы хотите? DEMO. Это решение, использующее только CSS.

Если вы установили width буквально, вы не сможете покинуть браузер, чтобы настроить размер автоматически.

Я изменил немного разметки с объектом, чтобы сделать пример более легким:

<div class="parent"> 
    <div class="child"> 
     <span class="text"> 
      This is a normal text. 
     </span> 
    </div> 
    <br /> 
    <div class="fixed-child"> 
     <span class="text"> 
      This is a text very laaaaaaaaaaaaaaaaaaaaaaaaaaaaarge! 
     </span> 
    </div> 
</div> 

Вот CSS:

.parent > div { 
    height: 50px; 
    margin-top: .325em; 
    border: 1px solid black; 
    display: inline-block; 
} 

Как вы видите, я поставил height сделать пример выглядишь лучше.

Будь хорошим, Leonardo