как предотвратить влияние скрытого переполнения на другие элементы?

У меня есть родительский элемент с динамическим текстом, который необходимо ограничить определенной областью. У меня были пользователи, которые писали предложения без использования пробелов (пример: yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy и т. д.) Это нарушало структуру моей стилизованной текстовой области.

#ProfileCommentBody{ width:500px;  font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; margin:15px 0px 0px 20px; float:left; background-color:#EAF7FB; padding:10px 10px 10px 10px; position:relative; overflow:hidden;}

Я использовал overflow:hidden, как вы можете видеть выше в коде css, и это решило проблему, но создало новую проблему. У меня есть еще один элемент, который представляет собой изображение с абсолютным позиционированием, которое завершает стиль моего речевого пузыря (вышеупомянутый элемент - речевой пузырь), и когда у меня есть вышеуказанный элемент на overflow:hidden, это изображение исчезает. Я пробовал z-index, и это не работает.

.ProfileCommentTail{background:url(images/speechBubbleTail.png) no-repeat top left; width:15px; height:10px; position:absolute; top:20px; left:-15px;}

Есть ли другой вариант, кроме overflow:hidden, или есть что-то, что я могу сделать, чтобы противодействовать нежелательной части того, что делает overflow:hidden?

HTML-структура:

 <div id='ProfileCommentBody' class='round_10px'>
        <div id='CommentNameProfile'>
            <div class='ProfileCommentTail'>&nbsp;</div>
                <a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'>
                    <?php echo $poster->first_name. " ". $poster->last_name; ?> says...
                </a>
        </div>
</div>

Вот пример изображения того, что он делает сейчас, что неверно (отсутствует хвост речевого пузыря справа от поляроида и слева от речевого пузыря) overflow:hidden заставляет это исчезнуть, но устраняет другую проблему У меня было: alt text
(источник: cysticlife.org)

вот как это ДОЛЖНО выглядеть, обратите внимание на крошечный синий хвост речевого пузыря, соединенный с речевым пузырем: alt text
(источник: cysticlife.org)


css z-index css-position overflow
person LightningWrist    schedule 13.07.2010    source источник
comment
зачем вам нужен скрытый перелив? можете ли вы создать еще одну оболочку над #ProfileCommendBody и сделать ProfileCommentTail ее дочерним элементом, чтобы он был родственным для ProfileCommentBody, а затем поместить относительную позицию в эту новую оболочку? если вы используете переполнение для очистки поплавков, измените его на метод clearfix.   -  person meder omuraliev    schedule 14.07.2010
comment
@meder, над #ProfileCommentBody есть оболочка, и, естественно, ProfileCommentTail является ее дочерним элементом. Я использую переполнение: скрытый, чтобы предотвратить более 100 символов текста без пробелов, нарушающих мой речевой пузырь. Я открыт для другой альтернативы, кроме overflow:hidden. И да, я позаботился о Clearfix в другом месте.   -  person LightningWrist    schedule 14.07.2010
comment
было бы полезно, если бы вы разместили свою html-структуру или включили демонстрацию.   -  person meder omuraliev    schedule 14.07.2010
comment
Я просто отредактирую это со структурой div и визуальной ссылкой на то, как это должно выглядеть и как это выглядит.   -  person LightningWrist    schedule 14.07.2010

Ответы (1)


arrow_upward
1
arrow_downward 

<div id="blah">
     <div class='ProfileCommentTail'>&nbsp;</div>
     <div id='ProfileCommentBody' class='round_10px'>
        <div id='CommentNameProfile'>
                <a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'>
                    <?php echo $poster->first_name. " ". $poster->last_name; ?> says...
                </a>
        </div>
      </div>
</div>

Это то, что я имел в виду своим первоначальным комментарием. CSS, такие как:

#blah { position:relative; }

Опять же, из-за отсутствия ссылок layout/design/comp трудно понять, что вы описываете. Я предлагаю опубликовать визуальные детали для проблем со зрением.

person meder omuraliev    schedule 13.07.2010
comment
Хорошо, да, сейчас я добавлю изображения, одно сломанное, а другое выглядит так, как должно выглядеть. Я попробовал, что ваш ответ кстати. И еще раз спасибо за вашу помощь - person LightningWrist; 14.07.2010
comment
Просто подумал, что вам будет интересно узнать, что я понял это. Я полностью убрал хвост ‹div› из структуры, поместил его прямо под ним и полностью позиционировал оттуда. - person LightningWrist; 15.07.2010
comment
Я думаю, это то, что я имел в виду, так или иначе, но ура. - person meder omuraliev; 15.07.2010