Переполнение CSS не подчиняется заполнению

Question

У меня есть набор элементов HTML, которые мне нужно стилизовать, и я никак не могу изменить структуру (да, я знаю).

HTML имеет div, который содержит два вложенных промежутка. У div есть отступы, и переполнение скрыто. Ширина div устанавливается программно и применяется как встроенный стиль.

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

После некоторых исследований выяснилось, что стандартным подходом к этому является использование второго вложенного div, но, как я уже упоминал, я не могу изменить структуру HTML.

В настоящее время у меня есть:

<!-- This is what I have to work with (I can't change the structure of this HTML!) --> 
<div class="c1" style="width: 100px;"> 
    <span class="c1-inner"> 
     <span class="c1-inner-2"> 
      122333444455555666666777777788888888999999999 
     </span> 
    </span> 
</div> 

<!-- This is how I want the HTML above to display --> 
<div class="c2" style="width: 100px;"> 
    <div class="c2-inner"> 
     122333444455555666666777777788888888999999999 
    </div> 
</div> 

стилизованный следующий CSS:

.c1 { 
    border: 1px solid red; 
    border-radius: 4px; 
    background-color: #c0c0c0; 
    padding: 0 13px 0 13px; 
    overflow: hidden; 
} 
.c1-inner { 
    // No relevant styles here yet 
} 

.c1-inner-2 { 
    // No relevant styles here yet 
} 


.c2 { 
    border: 1px solid red; 
    border-radius: 4px; 
    background-color: #c0c0c0; 
    padding: 0 13px 0 13px; 
} 

.c2-inner { 
    overflow: hidden; 
} 

A jsFiddle is available here

Мне нужно, чтобы стиль "кнопки" сверху так, что она выглядит как второй используя только CSS. Я достиг пределов своих навыков CSS, и любая помощь была бы очень оценена.

Answer 1

Простое исправление. Самый важный бит: вы можете создать интервал, отображающий значение блока, а не встроенное, что является его значением по умолчанию.

Вот соответствующий CSS вам нужно, и рабочий пример:

.c1 { 
 
    border: 1px solid red; 
 
    background-color: #c0c0c0; 
 
    padding: 0 13px 0 13px; 
 
} 
 
.c1-inner { 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 

 
.c2 { 
 
    border: 1px solid red; 
 
    background-color: #c0c0c0; 
 
    padding: 0 13px 0 13px; 
 
} 
 

 
.c2-inner { 
 
    overflow: hidden; 
 
}

We want this<br> 
 

 
<!-- This is what i Have to work with --> 
 
<div class="c1" style="width: 100px;"> 
 
    <span class="c1-inner"> 
 
     <span class="c1-inner-2"> 
 
      122333444455555666666777777788888888999999999 
 
     </span> 
 
    </span> 
 
</div> 
 

 

 

 
<!-- This displays how i want the html above to display --> 
 
<br> 
 
to look like this<br> 
 
<div class="c2" style="width: 100px;"> 
 
    <div class="c2-inner"> 
 
     122333444455555666666777777788888888999999999 
 
    </div> 
 
</div> 
 
<br> 
 
but cannot change the structure of the html!