我正在尝试使文本适合各种大小的 div，这些 div 本身由于视口(viewport)单位而响应。
这就是问题所在:下面的代码在一个代码笔中运行良好，至少对于我拥有的四个示例而言是这样:https://codepen.io/gramm/pen/VJPavg
文本适合 div，并且在调整页面大小时不会溢出。但是，当我的页面上有完全相同的 HTML 和 CSS(使用 Bootstrap 4)时，我的文本会溢出。
编辑:实际上，它在 Firefox 60.7.1(esr) 中运行良好。更新到 60.7.2(esr) 后，codepen 中的文本也溢出了。它也在 Edge 中溢出......
有谁知道造成这种行为的原因是什么？ Bootstrap 中的某些东西会阻止与 Codepen 中相同的显示吗？还是我的页面缺少 Codepen 的 CSS 中的某些内容？
.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">μερίδος μετὰ κυρίου <τοῦ> συν-<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">[ ̣ ̣ ̣ ̣ ̣]</span>ς Π[ε]θέως διὰ ἑτέρου κολλήματ[ος]
<br
id="ar-l19">ὑπάρχι δὲ τ[ῇ θυγατρὶ] παιδίσκη δούλη Τασου[χάρ]ιον <br id="ar-l20">(ἐτῶν) <span title="number: 32">λβ</span> ἄσημ[ος, ὑπάρχει δὲ] καὶ τῇ Ἀφροδοῦτι ο̣[ἰκία <span class="gap" lang="en"> ̣ ̣ ̣]</span> <br id="ar-l21">κωι
ψιλὸς τόπ[ος.] <br id="ar-l22">(hand 2) Πε<span class="gap" lang="en">[ ̣ ̣ ̣]</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>最佳答案
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 的高度不足以容纳您的文字。移除该固定高度，让 bootstrap 为您计算该高度。
关于html - Codepen 与 Bootstrap : CSS behaves differently，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56757067/