Codepen vs Bootstrap: CSS ведет себя по-разному - PullRequest
0 голосов
/ 25 июня 2019

Я пытаюсь подогнать текст под элементы различного размера, которые сами реагируют благодаря единицам просмотра.

Вот проблема: приведенный ниже код работает нормально в одном коде, по крайней мере для четырех примеров, которые у меня есть: https://codepen.io/gramm/pen/VJPavg

Текст соответствует div и не переполняется при изменении размера страницы. Однако, когда у меня на странице точно такой же HTML и CSS, который использует Bootstrap 4, я получаю переполнение текста.

EDIT : на самом деле, он работал нормально в Firefox 60.7.1 (esr). После обновления до 60.7.2 (esr) текст переполняется также в codepen. В Edge она тоже переполнена ...

Codepen: без переполнения

Страница начальной загрузки: переполнение

Кто-нибудь знает, что может быть причиной такого поведения? Что-то в Bootstrap препятствует тому же отображению, что и в Codepen? Или это что-то в CSS от Codepen, которого нет на моей странице?

.text {
  margin: 0 auto;
}

#tm12901 {
  width: 15.952380952380954vh;
  height: 50vh;
  font-size: 0.8vh;
  line-height: 1.5;
  background: Pink;
}

#tm56 {
  width: 50vw;
  height: 12.873563218390805vw;
  font-size: 0.525vw;
  line-height: 1.5;
  display: flex;
  background: LightCyan;
}

#tm242 {
  width: 50vw;
  height: 21.333333333333336vw;
  font-size: 0.875vw;
  line-height: 1.5;
  display: flex;
  background: Beige;
}

#tm9135 {
  width: 36.58536585365854vh;
  height: 50vh;
  font-size: 1.35vh;
  line-height: 1.5;
  display: flex;
  background: PaleGreen;
}
<div class="container">
  <div id="tm12901" class="text">
    <span class="ab">Ἀπολλωνίωι βασιλικ(ῶι) <br id="al2">γραμματεῖ Ἀρσι(νοίτου) Θεμίστο(υ) <br id="al3">παρὰ Θερμίου τῆς Σατα-<br id="al4">βοῦτος τῶν ἀπὸ κ(ώμ)ης <br id="al5">Σεντρεπασ̣εὶ τῆς αὐτῆς <br id="al6">μερίδος μετὰ κυρίου &lt;τοῦ&gt; συν-<br id="al7">γενοῦς Πνεφερῶτος <br id="al8">τοῦ Ἀρείου. ὁ προγεγραμ(μένος) <br id="al9">μου πατὴρ Σαταβοῦς <br id="al10">Πανίβιος μητρὸς <br id="al11">Ταρμούθιος ὑπερετὴς <br id="al12">ἀναγραφόμενος ἐπὶ τῆς <br id="al13">αὐτῆς κ(ώμ)ης ἐτελεύτη-<br id="al14">σεν τῶι Θὼθ μηνὶ τοῦ <br id="al15">ἐνεστῶτος πρώτου <br id="al16">καὶ εἰκοστοῦ (ἔτους) Ἁδριανοῦ <br id="al17">Καίσαρος τοῦ κυρίου. ἀξιῶι <br id="al18">ταγῆναι αὐτοῦ τὸ ὄνο-<br id="al19">μα ἐν τῇ τῶν τετελευτηκότ(ων) <br id="al20">τάξει ὡς ἐπὶ τῶν ὁμοίω(ν). <br>—— <br id="al21">Θέρμιον ὡς (ἐτῶν) <span title="number: 49">μθ</span>    οὐλ(ὴ) δακ(τύλῳ) (πρώτῳ) χ(ειρὸς) <span class="gap" lang="en">[...]</span> <br id="al22">Πνεφερῶς ὡς (ἐτῶν) <span title="number: 45">με</span> οὐλ(ὴ) δακ(τύλῳ) χ(ειρὸς) ἀρισ(τερᾶς). <br id="al23">(ἔτους) <span title="number: 21">κα</span> Αὐτοκραρος
    <br id="al24">Τραιανοῦ Ἁδριανοῦ Σεβαστοῦ <br id="al25">Φαῶφι <span title="number: 29">κ̣θ</span>. <br id="al26">(hand 2) τῶι κωμογρα(μματεῖ). εἰ ταῖς ἀληθ(είαις) <br id="al27">ἐτελ(εύτησεν) ὁ προγεγρα(μμένος), ἐπιτέλ(ει) ὡς καθ(ήκει), <br id="al28">ὡς πρὸς σὲ τοῦ λόγου <br id="al29">ἐσομένου, ἐάν τι παρὰ <br id="al30">τὸ δέον γένη(ται). (hand 3) Ἀνουβίω(ν) γρα(μματεὺς) σεση(μείωμαι). <br id="al31">(hand 2) (ἔτους) <span title="number: 21">κα</span> Ἁδριανοῦ Καίσαρος <br id="al32">τοῦ κυρίου Ἁθὺρ
    <span title="number: 6">ϛ</span>. <br id="al33">(hand 4) Θερις Σαταβος ὑπό-<br id="al34">μνημα. (ἔτους) <span title="number: 21">κα</span> <br id="al35">Ἁθρὺ <span title="number: 7">ζ</span>. </span>
  </div>
</div>

<div class="container">
  <div id="tm56" class="text">
    <span class="ab">(ἔτους) <span title="number: 4">δ</span> Μεσορὴ <span title="number: 11">ια</span>. ἀπέδοτο <br id="a1-l2">Ταθῶτις πήχεις στερε(οῦ) <br id="a1-l3"><span title="number: 5">ε</span> (ἀφʼ ὧν(?)) Ταελολοῦς <span title="number: 3">γ</span>    <br id="a1-l4">Πετεαρσεμθεὺς <span title="number: 2">β</span> (γίνονται) <span title="number: 5">ε</span> <br id="a1-l5">χα(λκοῦ) <span title="number: 5000">Ε</span>. </span><span class="ab">βασιλευόντων Κλεοπάτρας καὶ βασιλέως Πτολεμα[ί]ου θεῶν Φιλομητόρων Σωτήρων <br id="a2-l2">ἔτους <span title="number: 6">ϛ</span>    ἐφ ἱερείως βασιλέως Πτολεμαίου θεοῦ Φιλομήτορος Σωτῆρος Ἀλεξάνδρου καὶ <br id="a2-l3">θεῶν Σωτήρων καὶ θεῶν Ἀδελφῶν καὶ θεῶν Εὐεργετῶν καὶ θεῶν Φιλοπατόρων καὶ <br id="a2-l4">θεῶν Ἐπιφανῶν καὶ θεοῦ Εὐπάτορος καὶ θεοῦ Φιλομήτορος καὶ θεοῦ Φιλοπάτορος
    νέου καὶ <br id="a2-l5">θεοῦ Εὐεργέτου καὶ θεῶν Φιλομητόρων Σωτήρων ἱερουπώλου Ἴσιδος μεγάλης <br id="a2-l6">μητρὸς θεῶν ἀθλοφόρου Βερενίκης Εὐεργέτιδος κα[ν]ηφόρου Ἀρσινόης Φιλαδέλφου <br id="a2-l7">ἱερε[ί]ας Ἀρσινόης Φιλοπάτορος τῶν ὄντων ἐν Ἀλεξαν[δ]ρείαι,
    <br id="a2-l8">ἐν δὲ Πτολεμαίδι τῆς Θηβαίδος ἐφʼ εἱρειων καὶ ἱερισσ[ῶ]ν καὶ κανηφόρου τῶν ὄντων <br id="a2-l9">καὶ οὐσσῶν ἐν Πτολεμαίδι μηνὸς Παῦνι <span title="number: 11">ια</span> ἐν Παθύρει [ἐ]φʼ Ἡλιοδώρου ἀγορανόμου. <br id="a2-l10">ἀπέδοτο Ταθῶτις
    Φίβιος Περσίνη ὡς (ἐτῶν) <span title="number: 50">ν</span> μέση μ[ε]λίχρως μακροπρόσωπος <br id="a2-l11">εὐθύριν μετὰ κυρίου τοῦ ἑαυτῆς πρεσβυτέρου υἱοῦ Πατσεοῦτος το[ῦ Πα]τῆτος Πέρσου <br id="a2-l12">τῆς ἐπιγονῆς ἀπὸ τοῦ ὑπάρχοντος αὐτῇ ψιλοῦ τόπου
    τοῦ ὄντ[ος ἐ]ν τῷ ἀπὸ λι(βὸς) </span><span class="ab">μέρει Παθύρεως πήχεις στερεοῦ <span title="number: 5">ε</span> [ἐ]ν τῷ ἀπὸ βορρᾶ <br id="a3-l2">μέρει γείτονες τούτων· νότου τῆς αὐτῆς ψιλὸς τόπος <br id="a3-l3">βορρᾶ οἰκία Σεννήσιος ἀπηλιώτου
    ὁδὸς λι(βὸς) ψιλὸς τόπος <br id="a3-l4">τοῦ ἱεροῦ ἢ οἳ ἂν ὦσιν γείτονες. ἐπρίατο Ταελολοῦς Τοτοητις <br id="a3-l5">καὶ Πετεαρσεμθεὺς Πανοβχούνιος, ἀφʼ ὧν Ταελολοῦς <span title="number: 3">γ</span> <br id="a3-l6">Πετεαρσεμθεὺς πήχεις δύο (γίνονται)
    πή(χεις) <span title="number: 5">ε</span> χα(λκοῦ) <span title="number: 5000">Ε</span>. προπωλη-<br id="a3-l7">τρία καὶ βεβαιωτρία Ταθῶτις ἡ ἀποδομένη, ἣν ἐδέ-<br id="a3-l8">ξαντο Ταελολοῦς καὶ Πετεαρσεμθεὺς οἱ πριάμενοι. <br>—— <br id="a3-l9">Ἀμμώ(νιος)
    ὁ παρὰ Σώσου κεχρη(μάτικα). <br id="a3-l10">ἔτους <span title="number: 4">δ</span> Μεσορὴ <span title="number: 30">λ</span> τέ(τακται) ἐπὶ τ[ὴ]ν ἐν Κρο(κοδίλων) πό(λει) τρά(πεζαν) ἐφʼ ἧς Ἀπολλώνιος [θέμα] <br id="a3-l11">(δεκάτης) ἐγκυ(κλίου) κατὰ
    τὴν παρὰ Πανίσκου τ[ο]ῦ τελώνου διαγρα(φὴν) ὑφʼ ἣν ὑπ[ογρά(φει)] <br id="a3-l12">Ἀπολλώ(νιος) ὁ ἀντιγρα(φεὺς) Ταελολοῦς Τοτοήτ(ιος) καὶ Πετεαρσεμ(θεὺς) Πανοβχού[ν(ιος)] <br id="a3-l13">ψιλοῦ τόπου π(ήχεων) <span title="number: 5">ε</span> ἐν Πα̣θ̣ύ(ρει)
    ἀφʼ ὧν Ταελολοῦς π(ήχεις) [<span title="number: 3">γ</span> καὶ] Πετεαρσεμ(θεὺς) π(ήχεις) <span title="number: 2">β</span>, <br id="a3-l14">ὃν ἠγόρα(σαν) παρὰ Ταθώτιος τῆς Φίβιος χα(λκοῦ) <span title="number: 5000">Ε</span> τέλ(ος) <span title="number: 500">φ</span>    <br id="a3-l15">Ἀπολλώ(νιος) τρα(πεζίτης) <span title="number: 600">χ</span></span>
  </div>
</div>

<div class="container">
  <div id="tm242" class="text">
    <span class="ab">ἔτους <span title="number: 15">ιε</span> τοῦ καὶ <span title="number: 12">ιβ</span> <br id="a1-l2">Ἁθὺρ <span title="number: 11">ια</span>. ἀπέδοτο <br id="a1-l3">Ψενμεγχῆς Πανεχά(του) <br id="a1-l4">οἰκίαν ᾠκοδο(μημένην) καὶ ἐσ-
    <br
      id="a1-l5"><span class="linenumber">5</span>τεγασμένην κεκα-<br id="a1-l6">μαρω(μένην) καὶ τὴν προσοῦσαν <br id="a1-l7">ἀ\ου/υλὴν ἐν τῇ μέσῃ ται-<br id="a1-l8">νίᾳ Παθύ(ρεως). ἐπρίατο <br id="a1-l9">Ψενενοῦ(πις) Πασᾶτος <br id="a1-l10">χα(λκοῦ) (τάλαντα)
      <span
        title="number: 3">γ</span> (δραχμὰς) <span title="number: 2000">Β</span>. </span><span class="ab">ἀντίγρα(φον) ὠνῆς. <br id="a2-l2">βασιλευόντων Κλεοπάτρας καὶ Πτολεμαίου ἐπικαλουμένου Ἀλεξάνδρου τοῦ υ[ἱ]οῦ θεῶν Φι[λομητ]όρων <br id="a2-l3">ἔτους <span title="number: 15">ιε</span>        τοῦ καὶ <span title="number: 12">ιβ</span> ἐφʼ ἱερείων καὶ ἱερειῶν καὶ κανηφόρου τῶν ὄντων καὶ οὐσῶν μη[νὸ]ς Ἁθὺρ <span title="number: 11">ι[α</span> ἐν Πα]θύρε[ι] <br id="a2-l4">ἐφʼ Ἑρμίου τοῦ παρὰ Πανίσκου ἀγορανόμου. ἀπέδοτο Ψενμεγχῆς Πανεχάτ[ο]υ
        Πέρσης τ[ῆς ἐπι]γονῆς <br id="a2-l5">ὡς ἐτῶν <span title="number: 40">μ</span> μέσος μελίχρω(ς) τετανὸς ἀναφάλακρος μακροπρόσω(πος) εὐθύριν ἐπισχάζων τὸν πόδα δεξιὸν [ο]ὐλὴ παρʼ <br id="a2-l6">ὀφθαλμὸν ἀριστερὸν τὴν ὑπαρχον αὐτῶι οἰκίαν ᾠκοδομημένην
        καὶ ἐστεγασμένην καὶ κεκαμαρω[μ]ένην <br id="a2-l7">καὶ τεθυρωμένην καὶ τὴν προσοῦσαν αὐλὴν τὴν οὖσαν ἐν τῇ μέσῃ ταινίᾳ Παθύρεω[ς] ἧς γείτονε[ς νότου ο]ἰκία <br id="a2-l8">Νεχούτου τοῦ Πανεχάτου βορρᾶ οἰκία Κεφάλωνος ἀπηλιώτου ῥύμη λιβὸς οἰκία
        Πόρτ[ι]τ[ος] τοῦ Πε[τεσούχ]ου καὶ <br id="a2-l9">ἀνὰ μέσον ῥύμη ἢ οἳ ἂν ὦσι γείτονες πάντοθεν. ἐπρίατο Ψενενοῦπις Πασᾶτος Πέρσης ὡς (ἐτῶν) <span title="number: 50">ν</span> χαλ[κοῦ τά]λαντα <br id="a2-l10">τρία δραχμὰς δισχιλίας . προπωλητὴς καὶ
        βεβαιωτὴς τῶν κατὰ τὴν ὠνὴν ταύτην πάντων Ψ[ενμεγ]χῆς <br id="a2-l11">ὁ ἀποδόμενος, ὃν ἐδέξατο Ψενενοῦπις ὁ πριάμενος. </span>
  </div>
</div>

<div class="container">
  <div class="text" id="tm9135">
    <span class="ab"> Μαξίμῳ στρατηγῶι Ἀ[ρσι]νοείτ(ου) Ἡρακλείδο(υ) μερίδος καὶ <br id="ar-l2">Ἡρακλείδῃ βασιλικ(ῷ) γραμματ(εῖ) τῆς αὐτῆς μερίδος καὶ <br id="ar-l3">Ὀρσενούφι κωμογραμματ(εῖ) Καρανίδος καὶ <br id="ar-l4">Διοσκόρῳ καὶ τοῖς λοιποῖς λαογράφοις τῆς αὐτῆ(ς) κώμης <br id="ar-l5">παρὰ Πεθέως τοῦ Πεθέως τοῦ Πνεφερῶτο(ς) (μητρὸς) Ταμύσθας <br id="ar-l6">ἀπὸ κώμης Καρανίδο(ς). κατὰ τὰ κελευσθέντα ἀπογρά-<br id="ar-l7">φομαι ἐμαυτόν τε καὶ τοὺς ἐμοὺς εἰς τὴν τοῦ <br id="ar-l8">διεληλυθότος ἐνάτου (ἔτους) Ἀντωνίνου Καίσαρος τοῦ κυρίου <br id="ar-l9">κατʼ οἰκίαν ἀπογραφὴν εἰς τὴν ὑπ[άρχ]ουσαν τῇ γυ-<br id="ar-l10">[ναικί] μου Ἀφροδοῦτι Ἄπιτος ἐν τῇ κώμῃ οἰκίαν καὶ <br id="ar-l11">[αὐλ]ὴν οὖσαν ἐπʼ ἀμφόδου Κωμογραμματέων. <br id="ar-l12">εἰμὶ δὲ <br id="ar-l13">[Πεθεὺς] ὁ προγεγραμμένος ἀπολελυμένος τῆς λαογραφείας  <br id="ar-l14">(ἐτῶν) <span title="number: 76">οϛ</span>    ο[ὐλ]ὴ ποδὶ δεξ[ι]ῷ, καὶ γυναῖκά μου Ἀφροδοῦν <br id="ar-l15">Ἄ[πιτο]ς τοῦ Παπ[ο]ντῶτος (ἐτῶν) <span title="number: 70">ο</span> οὐλὴ γόνατει δεξιῷ <br id="ar-l16">καὶ [τὴν ἐ]ξ ἀμφοτέρων θυγατέρα Δι[οδ]ώραν (ἐτῶν) <span title="number: 33">λγ</span>    ἄσημο(ν) <br id="ar-l17">καὶ τὰ ἐξ αὐτῆς τ[έκνα] θ[ηλ]υκὰ τρία , ἅπερ ἀπε-<br id="ar-l18">γράψατο ὁ πατὴρ <span class="gap" lang="en">[&nbsp;&nbsp;̣&nbsp;&nbsp;̣&nbsp;&nbsp;̣&nbsp;&nbsp;̣&nbsp;&nbsp;̣]</span>ς Π[ε]θέως διὰ ἑτέρου κολλήματ[ος]
    <br
      id="ar-l19">ὑπάρχι δὲ τ[ῇ θυγατρὶ] παιδίσκη δούλη Τασου[χάρ]ιον <br id="ar-l20">(ἐτῶν) <span title="number: 32">λβ</span> ἄσημ[ος, ὑπάρχει δὲ] καὶ τῇ Ἀφροδοῦτι ο̣[ἰκία <span class="gap" lang="en">&nbsp;&nbsp;̣&nbsp;&nbsp;̣&nbsp;&nbsp;̣]</span> <br id="ar-l21">κωι
      ψιλὸς τόπ[ος.] <br id="ar-l22">(hand 2) Πε<span class="gap" lang="en">[&nbsp;&nbsp;̣&nbsp;&nbsp;̣&nbsp;&nbsp;̣]</span>χ σεση(μείωμαι). <br id="ar-l23">(hand 3) Ἀπολ[λ(ώνιος)] σεση(μείωμαι). <br id="ar-l24">(hand 1) (ἔτους) <span title="number: 10">ι</span>      Ἀντωνίνου [Καί]σαρος τοῦ κυρίου Ἐπεὶφ <span title="number: 30"><span class="supraline" title="line above">λ</span></span>
      </span>
  </div>
</div>

1 Ответ

1 голос
/ 25 июня 2019

Bootstrap в значительной степени требует, чтобы вы поместили <div class="row"> в свой контейнер.На .row есть псевдоэлемент, который очищает float после всего содержимого, которое является корнем вашей проблемы.

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div id="tm242" class="text">
                <!-- all of your content -->

            </div>
        </div>
    </div>
</div>

РЕДАКТИРОВАТЬ: Вторая проблема заключается в том, что у вас есть фиксированная высота на div #tm242.Похоже, что 21.33vw просто недостаточно для вашего текста.Снимите эту фиксированную высоту и позвольте начальному загрузчику выполнить работу по вычислению этой высоты за вас.

...