Встроенный переполнение: скрыто только частично работает

Question

Проблема: В одном стиле встроенного стиля «переполнение: скрытое» работает нормально, а в другом стиле встроенного стиля это не так.

Here - код CSSDesk (jsfiddle не работает с этой записью).

Справочная информация. В моем проекте мне нужно использовать таблицы HUGE, чтобы отображать переменные, поступающие с db - до 75 переменных на страницу. Я старался изо всех сил использовать divs, но я потратил 20 часов и, в конечном счете, вернулся к столам (для вас, пуристы CSS, я извиняюсь).

В некоторых моих данных td данные немного длинны и должны быть «скрыты» (в данном случае это не имеет значения, потому что данные - это просто «предварительный просмотр»). Я обыскал в Интернете и сделал эксперимент, в котором единственным стилистическим элементом, который мог бы использовать «скрытый», является div (я пробовал tds и промежутки в эксперименте, и они не работают).

В одном td я хотел бы поместить одну переменную слева, а другую справа - большую часть времени, и то, и другое поместится в td, но на очень длинной переменной это нормально, чтобы отрубить часть правой переменной. Итак, я пишу CSS и html и стилю divs, чтобы они соответствовали моим критериям - это верхние два tds на странице CSSDesk, отмеченные выше. Все работает нормально.

НО! В течение последних нескольких месяцев я узнал, что можно «смешивать» несколько стилей в «классе» части идентификатора элемента (например, <td class="redcolor blueunderline">) и я обнаружил, что во многих случаях очень удобно использовать «небольшие дополнения», на элементе, который является единственным на странице, и вам придется переписать/добавить весь внедренный стиль или изменить таблицу стилей (например, имя, адрес, номер телефона, почтовый индекс и вы хотите только «жирным шрифтом» название - class="identifers" vs class="identifiers bold") - Интересно, если вы эксперты когда-либо сделать что-то подобное

Так что я играл немного, и получил большинство из них работает КРОМЕ для «перелива: скрытый»

для верхнего левого DIV в?. Пример CSSDesk Я использую этот CSS и html (он отлично работает):

.leftdivclass { 
    float:left; 
    background-color:green; 
    color:black; 
    border:2px solid yellow; 
    overflow:hidden; 
    white-space:nowrap; 
    width:25%;} 
<td><div class="leftdivclass" >Upper Left 123456789</div> 

Для верхней правой DIV в примере CSSDesk я использую этот CSS и HTML (он прекрасно работает):

.rightdivclass { 
    float:right; 
    background-color:red; 
    color:black; 
    border:2px solid yellow; 
    overflow:hidden; 
    white-space:nowrap; 
    width:25%;} 
<div class="rightdivclass" >Upper Right 123456789</div></td> 

Для нижней левой DIV в примере CSSDesk я использую этот CSS и HTML (все работает, но «скрытый», - отмечают число торчат)

.floatleft { 
    float:left;} 
.bgblue { 
    background-color:blue;} 
.bgred { 
    background-color:red;} 
.lcwhite { 
    color:white;} 
.lcblack { 
    color:black;} 
.border2y { 
    border:2px solid yellow;}  
overflowhidden { 
    overflow:hidden;} 
.wsnowrap { 
    white-space:nowrap;} 
.width25pc { 
    width:25%;} 
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div> 

но если я использую тот же HTML и добавить «стиль =» переполнение: скрытый»все работает отлично, как и в нижнем правом примере из Пример CSSDesk.

<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td> 

Вопросы:

1. Почему бы один встроенный стиль CSS, содержащий «переполнение: скрытый» работа, но когда он обрабатывается к одному дополнение к команде класса он не работает ? И почему она будет работать, если я добавил «стиль =» переполнение: скрытый»- рядный

2. ли вам специалисты когда-либо использовать небольшие„класса фрагменты“, как это

Опять же, я благодарю вас авансовый.

Answer 1

Вы можете смешивать и сопоставлять эти классы. Если это экономит избыточность, отлично. Если он смешивает классы и классы контейнеров (т. Е. Родители, из которых они находятся внутри), тогда становится трудно отлаживать вашу проблему.

Скорее всего, он не работает, поскольку его родительский или другой класс конфликтует с свойством переполнения. Встроенные стили, как style="overflow:hidden;" почти всегда получают приоритет самые высокие, но помните, что overflow имеет свойство по умолчанию visible.

Если вы звоните 2 класса, один имеющие overflow:hidden; и другие overflow:visible;, то есть шанс, что вы не получите ваш желаемый эффект.

Имейте в виду также, что селектор, как этот

#divid .divclass 

всегда победит

.divclass 

и будет рассматриваться с большим приоритетом.

Кроме того, вы пробовали

overflow:hidden !important; 

, который, как правило, имеют приоритет над всем. Надеюсь, это поможет.