我正在为软件设计项目创建一个网站，其中一个标准是不允许任何重叠。我有一个悬停功能，以便当您将鼠标悬停在这些步骤上时，将显示该步骤的过程。
使用第2步＆amp; 3在悬停效果期间显示的文本被网页边缘阻止，因此它以一种段落形式创建新行。
第2步中具有悬停效果的网页的屏幕截图： http://s32.postimg.org/kw0u3lk8l/Screen_Shot_2016_05_14_at_7_05_13_PM.png
这就是我想要的第7步＆amp; 8而不是被任何东西阻挡，它们继续作为一个字符串，重叠圆圈。所以我想知道是否有办法让圆圈成为一个坚固的物体或一些不能重叠的东西，迫使文本形成新的线条。
步骤8中的重叠图像悬停效果如下： http://s32.postimg.org/yof8z8b05/Screen_Shot_2016_05_14_at_7_05_25_PM.png
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Fetch Execute Cycle</title>
<style type="text/css">
html {
box-sizing: border-box;
background-color: #faa635;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font: 16px/1.5 "Comic Sans MS", cursive, sans-serif;
margin: 1em;
}
h1 {
font-family: American Captain, "Comic Sans MS", cursive;
}
.circle {
width:450px;
height:450px;
border-radius:50%;
border: solid;
color:#3658bf;
line-height:500px;
background:#000;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* COMMON HOVER EFFECTS */
.common {
display: block;
font-weight: 700;
text-align: center;
border: 2px solid #3658bf;
color: #3658bf;
background: transparent;
border-radius: .25rem;
cursor: pointer;
padding: .5rem;
position: absolute;
transform: translate(-50%, -50%);
}
.common:hover {
background: rgba(54, 88, 191, 0.888);
color: #fff;
}
.common:focus {
outline: 0;
}
.common:hover {
font-size: 0;
}
.common:hover:after {
content: attr(data-hover);
font-size: 1rem;
word-wrap: break-word;
}
/* HELP */
.help {
left: 50%;
top: 13%;
}
/* STEP 1 */
.step1 {
left: 70%;
top: 20%;
}
/* STEP 2 */
.step2 {
left: 80%;
top: 40%;
}
/* STEP 3 */
.step3 {
left: 80%;
top: 65%;
}
/* STEP 4 */
.step4 {
left: 70%;
top: 82%;
}
/* STEP 5 */
.step5 {
left: 50%;
top: 90%;
}
/* STEP 6 */
.step6 {
left: 30%;
top: 82%;
}
/* STEP 7 */
.step7 {
left: 20%;
top: 65%;
}
/* STEP 8 */
.step8 {
left: 20%;
top: 40%;
}
/* STEP 9 */
.step9 {
left: 30%;
top: 20%;
}
</style>
</head>
<body>
<h1><center><u>[]'s example of the Fetch Execute Cycle</u> </center></h1>
<div class="circle"><img class ="centered" src="http://i64.tinypic.com/4tsk5i.png" onMouseOver="this.src='https://i.imgsafe.org/67289f5.png'" onMouseOut="this.src='http://i64.tinypic.com/4tsk5i.png'" border="0" alt="Fetch Execute Cycle Image" width="300"></div>
<!-- Help -->
<a class="common help" data-hover="Hover over steps for information">Help</a>
<!-- Step 1 -->
<a class="common step1" data-hover="Fetching the instruction from primary storage!">Step 1</a>
<!-- Step 2 -->
<a class="common step2" data-hover="Decoding the instruction into an operation code and data addresses!">Step 2</a>
<!-- Step 3 -->
<a class="common step3" data-hover="Copying the operation code into the instruction register!">Step 3</a>
<!-- Step 4 -->
<a class="common step4" data-hover="Copying the addresses of the data into the address register!">Step 4</a>
<!-- Step 5 -->
<a class="common step5" data-hover="Using the address register to copy the data into the storage register!">Step 5</a>
<!-- Step 6 -->
<a class="common step6" data-hover="Sending the operation code and data to the ALU!">Step 6</a>
<!-- Step 7 -->
<a class="common step7" data-hover="Executing the instruction on the data!">Step 7</a>
<!-- Step 8 -->
<a class="common step8" data-hover="Sending the result to the accumulator, ready for the next instruction!">Step 8</a>
<!-- Step 9 -->
<a class="common step9" data-hover="Storing the results in primary storage!">Step 9</a>
</body>
答案 0 :(得分：0)
要解决此问题，必须指定宽度，然后您可以自动换行。 所以在.common：
的css中添加这些行width:250px;
word-wrap: break-word;