我有一些带有一些工具提示的段落，问题是这些工具提示中的一些不会留在短语中并以新字符串开头。
body {
background-color: black;
}
.col1 {
position: relative;
float: left;
left: 125px;
width: 60%;
padding: 0;
margin-left: 30px;
background-color: #FFFFFF;
border: 1px solid gray;
box-shadow: 5px 5px 5px gray;
}
.col1 img {
position: relative;
width: 100%;
height: 80px;
margin: 0;
padding: 0;
}
.col1 h2 {
position: relative;
text-align: center;
top: -58px;
}
.col1 p {
margin: 0;
padding: 0;
}
.tooltip, .tooltip2, .tooltip3, .tooltip4 {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
color: #5790ce;
}
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info {
box-sizing: border-box;
position: absolute;
bottom: -380px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info2 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info3 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info4 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before,
.info2:before,
.info3:before,
.info4:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info2:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info3:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info4:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.text, .text2, .text3, .text4 {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more, .more2, .more3, .more4 {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover, .more:focus,
.more2:hover, .more2:focus,
.more3:hover, .more3:focus,
.more4:hover, .more4:focus {
background-color: green;
color: #FFFFFF;
}
.row:after {
content: "";
display: table;
clear: both;
}<div class="row">
<div class="col1">
<img src="images/corner.png"><h2>GENERALITA'</h2>
<p>L'Umbria è una delle 20 regioni dell'Italia centrale, ricca di paesaggi immersi nel
verde delle valli e di borghi antichi, comprende 888.908 abitanti e si trova nel cuore
della penisola con una superficie di 8.456 km². Di questa regione fa parte il quarto
lago naturale più esteso d'Italia, il
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="text">Situato in posizione centrale rispetto alle città d’arte
del centro Italia il suo comprensorio è composto da otto comuni, alcuni dei
quali adagiati sulle colline (Città della Pieve, Paciano, Panicale e
Piegaro) ed altri (Castiglione del Lago, Magione, Passignano sul Trasimeno
e Tuoro sul Trasimeno) direttamente affacciati sullo specchio d´acqua.<br><br>
Della bellezza e armonia di questi luoghi se ne accorse anche il principe
Trasimeno che, rimasto affascinato da questo paesaggio, si imbatté nella
bellezza della ninfa Agilla. Da questo duplice incontro nacque una passione
che finì tragicamente con la morte del principe. Da allora il lago prese il
nome di Trasimeno e si dice che quando il vento accarezza le sue acque, si
possa ancora udire il malinconico lamento della ninfa Agilla che piange
alla ricerca del suo amato.</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>, il lago di
<div onclick="void(0);" class="tooltip2">Piediluco
<div class="info2">
<div class="text2">Piediluco è un pittoresco centro il cui nome significa "ai
piedi del bosco sacro". Con un assetto rimasto quello del medioevo, con le sue
basse casette colorate, è in realtà dislocato nello stretto lembo di terra che
corre tra il lago ed il monte. Il lago, incassato tra rilievi boscosi, ha
l’aspetto di uno specchio d’acqua alpino. Il paese è dominato dai resti della
Rocca risalente al XI secolo, ormai in parte in rovina, rimane pur sempre
superba ed imponente.<br><br>Molto suggestivo, è circondato da rilievi boscosi,
tra i quali è caratteristica per la sua forma di largo cono la montagna dell'Eco.
Questa montagna deve il suo nome al fatto che è in grado di rimandare un intero
endecasillabo in maniera perfetta.</div>
<a class="more2" href="#" target="_blank">More</a>
</div>
</div>, che confina con
il Lazio, e il bacino artificiale di
<div onclick="void(0);" class="tooltip3">Corbara
<div class="info3">
<div class="text3">Il lago di Corbara è un lago dell'Italia centrale, di origine artificiale,
formatosi con la costruzione negli anni sessanta del bacino idroelettrico omonimo sul fiume Tevere.
Prende il nome dalla frazione di Corbara, località del comune di Orvieto. Fa parte, unitamente ai
territori circostanti, del Parco fluviale del Tevere, area naturale protetta dell'Umbria.<br><br>
Nei pressi del lago si trovano "Vissani", uno dei templi della gastronomia italiana e alcune delle
più rinomate e prestigiose aziende vinicole dell'Umbria, riunite nel Consorzio di tutela del Lago di
Corbara DOC.</div>
<a class="more3" href="#l" target="_blank">More</a>
</div>
</div>. In Umbria vi sono anche molti torrenti
di piccole dimensioni e numerosi fiumi: il Tevere, che raccoglie quasi tutte le acque
degli altri fiumi umbri, il Nera, il Paglia, il Chiascio, il Topino ed il Nestore.
Risaltano tra i "minori" il Corno, il Fersinone, il Clitunno e vari torrenti.</p><br>
<p>La bellezza dell’Umbria nasce dalla fusione tra l'arte e la natura, da luoghi
evocativi, dalla presenza di capolavori rinascimentali e dai suoi borghi medioevali
nelle colline.</p><br>
<p>Il capoluogo umbro è
<div onclick="void(0);" class="tooltip4">Perugia
<div class="info4">
<div class="text4">Perugia, la grande "Arce Guelfa", sorge al centro della regione, con i 5 rioni storici
racchiusi dalle mura Etrusche. Quando la città di Roma era poco più di un accampamento di capanne, nella
Perugia etrusca si entrava da ben 7 porte, tra cui particolarmente imponente, la Porta Pulchra o d'Augusto.
<br><br>Entrando nella città da Porta San Pietro, s'incontra a destra la Basilica di San Domenico. Si
raggiunge poi la Piazza del Sopramuro, dove si allineano il palazzo quattrocentesco dell'Università Vecchia,
unito al Palazzo del Capitano del Popolo. Proseguendo si apre una delle importanti piazze d'Italia: la
Piazza Grande di Perugia (Piazza IV Novembre), dominata al centro dalla Fontana Maggiore risalente al '200.
<br><br>Nella piazza, si apre il superbo complesso monumentale che oltre alla fontana, comprende anche la
Cattedrale e lo splendido Palazzo dei Priori.<br><br>La rampa di Via delle Prome, partendo dall'Arco d'Augusto,
conduce al punto più alto della città, dove sorgeva la fortezza di Porta Sole eretta nel secolo XIV dal
Gattapone e in seguito distrutta a furore di popolo. Da trascurare il complesso di San Francesco, e
l'Oratorio di San Bernardino: capolavoro d'Agostino di Duccio.</div>
<a class="more4" href="#" target="_blank">More</a>
</div>
</div>, centro culturale di cui fanno parte due università
e alcune manifestazioni di importanza internazionale, mentre le province sono
Perugia e Terni; i centri maggiori sono Foligno, Città di Castello, Spoleto,
Gubbio, Assisi, Bastia Umbra, Orvieto, Amelia, Narni, Marsciano e Todi. Confina ad
est e a nord-est con le Marche, a ovest e a nord-ovest con la Toscana; a sud e
sud-ovest con il Lazio.</p><br>
<p>Tra le ricchezze della regione spicca la città medievale di Assisi, iscritta nella
lista dei siti Unesco “Patrimonio Mondiale dell’Umanità” e rappresenta un insieme di
capolavori del genio creativo umano. Ricca di tradizioni tra cui il Calendimaggio,
una rievocazione storica che trasforma la città in un antico borgo medievale abitato
da dame, cavalieri, arcieri e tanti altri personaggi storici. In provincia di Terni
sorge Orvieto, famosa per il Duomo; capolavoro dell'arte gotica; per i palazzi, i
vicoli medievali e il Pozzo di San Patrizio, intorno al quale girano due scale
elicoidali non comunicanti con 248 scalini da percorrere per raggiungere l’acqua a 62
metri di profondità.</p>
</div>
</div>
小提琴：https://jsfiddle.net/LhjmLw8k/29/
从上面的例子可以看出，即使有足够的空间，两个蓝色字（Trasimeno和Perugia）也不会留在短语内。
如果将两个单词放在短语中，我该怎么做？
答案 0 :(得分：1)
为段落设置display: inline;样式：
.col1 p {
margin:
padding: 0;
display: inline;
}
还要将z-index的值大于工具提示（现在不设置，因此即使1应该可以工作）到.info，当悬停在工具提示上时，用工具提示信息覆盖它们。
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
z-index: 100;
}
请查看fiddle。
答案 1 :(得分：0)
好一阵子后，我发现了问题的原因以及解决问题的正确方法。
基本上我无意中试图在一个内联元素（<div>）中嵌套一个块元素（<p>），这显然是错误的，因为内联元素不能包含块元素。克服该问题的正确方法是用<p>（块元素）替换所有<div>（内联元素＆gt;），以便在其他块元素中包含块元素，然后使用适当的CSS规则设置文本样式
现在一切正常。