# Фуригана в верхней части комментария обрезается

**URL:** <https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206>\
**Category:** Bug\
**Created:** [04.Ноябрь.2020 10:33:01 UTC](https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206 "2020-11-04T10:33:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![plfn](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@plfn](https://meta.discourse.org/u/plfn)\
**Post date:** [04.Ноябрь.2020 10:33:01 UTC](https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206/1 "2020-11-04T10:33:01Z")

</div>

например: 漢字かんじ

Фуригана не влияет на высоту элемента и его разметку, а контейнер скрывает переполнение. Например:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/f/1f8af723a4239f395bb2f15c7286e354a54ad2e9.png)

Изменение стиля для `.topic-body .cooked` на `overflow: visible` решает эту проблему, хотя это также может пропускать намеренные или раздражающие переполнения.

Это происходит в последней версии Firefox (83.0b6) на macOS. На Chrome (67) воспроизвести не удалось.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [04.Ноябрь.2020 22:41:11 UTC](https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206/2 "2020-11-04T22:41:11Z")

</div>

👋 Спасибо за сообщение!

Я _думаю_, мы можем перенести `margin-top: 15px` из `.regular.contents` на `.cooked` в виде `padding-top: 15px`… это позволит сохранить то же расстояние и скрыть переполнение, но даст дополнительные 15px пространства сверху (этого должно хватить для фуриганы)…

Мне нужно проверить, не вызовет ли такое изменение других проблем, но я не вижу никаких очевидных препятствий…

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [07.Ноябрь.2020 02:19:06 UTC](https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206/4 "2020-11-07T02:19:06Z")

</div>

У меня есть изменение в нашей очереди на проверку

> <https://github.com/discourse/discourse/pull/11154>
>
> Discussion here: https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut…-off/169206
> 
> Switching from margin on \`.topic-body .regular\` to padding on \`.cooked\` retains the same visual spacing, and gives vertically overflowing text a little extra space before it's cropped by \`overflow: hidden\`.
> 
> I did a little testing and this seems safe... this comment gave me second thoughts:
> 
> \> // this ensures consistent top margin on topic posts even if the first line of a post
> \> // is a top-margin-less element like a list or image.
> 
> but it's old and no longer true due to:
> 
> \`\`\`css
> \> \*:first-child {
> margin-top: 0;
> }
> \`\`\`
> 
> (all first children of \`.cooked\` have their \`margin-top\` removed)
> 
> The above first-child CSS was in \`compose.scss\` but isn't limited to the composer, so I moved it to \`topic-post.scss\` and removed a dupe.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [17.Ноябрь.2020 03:59:16 UTC](https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206/5 "2020-11-17T03:59:16Z")

</div>

Это уже слито, вы можете увидеть это в действии на этом примере: 漢字кандзи

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [24.Ноябрь.2020 02:00:08 UTC](https://meta.discourse.org/t/furigana-at-top-of-comment-get-cut-off/169206/6 "2020-11-24T02:00:08Z")

</div>

Эта тема была автоматически закрыта через 5 дней. Новые ответы больше не принимаются.