2015-11-26 4 views
0

У меня проблема. У меня есть Instagram feed от Instagrams API, который тянет изображение, любит, комментарии и описание. Описание под изображением замкнуто этим CSS:Tabindex и переполнение: скрыто

#instagram-feed .meta-data p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: #000; 
} 

Я также добавил скрипт, который создает ссылки на хэштег, так что вы можете нажать их непосредственно в корме.

Это прекрасно работает. Пока вы не запустите страницу. Поскольку текст/хэштеги скрыты после одной строки, он все еще находится в HTML-структуре, просто не отображается.

Так что происходит, когда я перехожу на страницу и получаю фид Instagram, так что tabindex находит скрытые хэштеги. Но они невидимы. Только рамка фокусировки отображается вокруг скрытых хэштегов.

tabindex="-1" удаляет элемент из tabindex, который я хочу добавить к переполненным/скрытым ссылкам, но я не могу сделать это вручную, так как описание динамически создается. Мне нужен лучший CSS (если возможно) или somekind jQuery. Но я понятия не имею, как это сделать.

Так что мой вопрос в том, как удалить скрытые ссылки из tabindex? :)

Edit:

Попытка это увидеть, какие элементы внутри или за пределами родителя:

http://jsfiddle.net/fprm7mgd/8/. Ссылка в третьем абзаце должна быть красной.

На сайте position().left; в третьем p что-то вроде 670px, при запуске console.log. Но на самом деле a составляет около 130 пикселей прямо с левой стороны. Похоже, position().left; идет от родительского DIV, а не от родительского р ...

Instagram feed

ответ

0

Решения добавить ... position:relative ... параграфы.

position().left использовать свой элемент смещения, который в этом случае равен <html>. Другими словами, position().left работает точно так же, как position: absolute в CSS. Если родительский элемент не равен position: relative, он подсчитывается из <html> -элемента.

http://jsfiddle.net/fprm7mgd/47/

Смежные вопросы