Question

我的代码中存在问题。我有几个列表项，但如果文本延伸得太远，则字母移动到下一行，并在当前适当的文本后面混乱。我添加了一个Fiddle来说明会发生什么。与HTML元素上的宽度滑块混淆以观察问题。

*我的代码是通过我编写的C ++程序动态生成的，但我不认为这是导致问题的原因。

CSS：

html {
    background-color: white;
    padding: 10px;
    font-family: sans-serif;
    font-size: 15px;
}
body {
    background-color: #f6f6f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    display: table;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 0;
    width: 100%;
}
address {
    position: absolute;
    top: 5%;
    right: 1%;
    text-align: right;
    font-size: smaller;
    font-style: normal;
}
h1 {
    position: absolute;
    left: 120px;
    top: 40px;
    font-size: larger;
    font-weight: normal;
    text-decoration: underline;
}
ol {
    border-left: 2px solid rgba(255, 0, 30, .25);
    border-right: 2px solid rgba(255, 0, 30, .05);
    padding: 0;
    margin: 0;
    margin-left: 100px;
    margin-right: 80px;
    position: relative;
    z-index: 0;
    float: left;
    width: 80%;
}
ol li {
    padding: 0;
    margin-left: -104px;
    margin-right: -81px;
    padding-left: 110px;
    padding-right: 100%;
    border-bottom: 2px solid rgba(0, 160, 255, .1);
    line-height: 30px;
    height: 30px;
    width:100%;
}
ol li:first-child {
    border-top: 2px solid rgba(0, 160, 255, .1);
    margin-top: 120px;
}
ol li:last-child {
    margin-bottom: 50px;
}
ol::after {
    position: absolute;
    bottom: 50px;
    right: -65px;
    color: rgba(0, 160, 255, .16);
    line-height: 30px;
    font-weight: 400;
    font-family:'Mrs Sheppards', cursive;
    letter-spacing: 2px;
}
ol::before {
    content:"";
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5) inset;
    height: 25px;
    width: 25px;
    border-radius: 25px;
    position: absolute;
    top: 105px;
    left: -75px;
}
body::before {
    content:;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5) inset;
    height: 25px;
    width: 25px;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 27px;
}
body::after {
    content:;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5) inset;
    height: 25px;
    width: 25px;
    border-radius: 25px;
    position: absolute;
    bottom: 105px;
    left: 27px;
}
.container {
    width:auto;
    max-width: 100%;
    height:100%;
    overflow: hidden;
}
em {
    font-weight: bold;
    font-style: oblique;
}

HTML：

<body>
    <div class="container"><address>Drue<br>A.P. Comp, 6th <br>12/09/13</address>
        <h1>A Nation is Born Vocab Part 2</h1>
        <ol>
            <li><em>Cacophony-</em> harsh, jarring sound</li>
            <li><em>Despotic-</em> Harsh; cruel; unjust</li>
            <li><em>Posterity-</em> Future generations</li>
            <li><em>Extricate-</em> difficult</li>
            <li><em>aruous-</em> Asylum</li>
            <li><em>Place of refuge-</em> 
            </li>
            <li><em>Asylum-</em> Place of refuge</li>
            <li><em>Monotony-</em> tiresome, unchanging sameness; lack of variety</li>
            <li><em>Epistle-</em> essays written in letter form, created for general plubication</li>
            <li><em>Invective-</em> verbal attack; strong criticism</li>
            <li><em>Infallibility-</em> inability to be wrong; reliability</li>
            <li><em>Extenuate-</em> to lessen or attempt to lessen the magnitude or seriousness of, by providing partial exuses; to reduce strength of; mitigate</li>
            <li><em>Profundity-</em> great depth; depth of intelelct, feeling, or meaning</li>
            <li><em>Vigilant-</em> alert to danger; watchful</li>
            <li><em>Inviolate-</em> not broken, assaulted, harmed, or profaned; intact</li>
            <li><em>Invincible-</em> incapable of being overcome or defeated; unconquerable</li>
            <li><em>Adversary-</em> an opponent, an enemy</li>
            <li><em>Supplicate-</em> the act of asking for humbly or earnestly, as by praying; a humble entreaty or petition</li>
            <li><em>Fermidable-</em> arousing fear, dread, or alarm; inspiring awe, admiration, or wonder; difficult to undertake, surmount, or defeat</li>
            <li><em>Inestimable-</em> incalculable; incomputable; invaluable</li>
            <li><em>Subjugation-</em> the act of conquering</li>
            <li><em>Scintillating-</em> sparkingling, flashing</li>
            <li><em>Insidious-</em> deceitful; treacherious; working or spreading harmfully in a subtle or stealthy manner</li>
            <li><em>Remonstrated-</em> to reason or plead in protest</li>
            <li><em>Magnitude-</em> greateness of rank or position; greatness in size, extent, significance, or influence</li>
            <li><em>Revere-</em> to regard with awe, deference, and devotion; worhsip, adore, idolize</li>
            <li><em>Salutary-</em> Beneficial; promoting a good purpose</li>
            <li><em>Unanimity-</em> complete agreement</li>
            <li><em>Crux-</em> the basic, central, or critical point or feature</li>
            <li><em>Ingenuity-</em> inventive skill or imagination; cleverness</li>
            <li><em>Vitality-</em> physical or intellectual energy; power to endure or survive; life force</li>
            <li><em>Impel-</em> to urge to action through moral pressure; to drive forward; move; force</li>
            <li><em>Flagrant-</em> conspicuously bad, offensive, or reprehensible; glaring; outrageious</li>
            <li><em>Provocation-</em> the act of inciting to anger or resentment; the act of stirring to action or feeling</li>
            <li><em>Manifest-</em> evident, obvious, clear; to show or demonstrate plainly</li>
            <li><em>-</em> 
            </li>
        </ol>
    </div>
</body>

格雷厄姆 Problem with code

Answer 1

您需要添加一些javascript来绘制线条，这是一个有效的jsfiddle。

window.onresize = window.onload = drawLines;

function drawLines() {
  var container = document.getElementById('container');
  var pagelines = document.getElementById('pagelines');

  // Clear any previous lines
  pagelines.innerHTML = "";

  // Add the individual lines
  for (var i=150; i<container.clientHeight-40; i+=30) {
    pagelines.insertAdjacentHTML(
      'beforeend',
      '<div class="pageline" style="top:'+i+'px"></div>'
    );
  }
}

您需要将<div class="container">更改为<div class="container" id="container">，以便我们可以使用getElementById()找到该元素。您还需要在<div id="pagelines"></div>的底部添加container div。

对于CSS，您需要添加以下内容：

.pageline {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: rgba(0, 160, 255, .1);
}

并删除

ol li {
  border-bottom: 2px solid rgba(0, 160, 255, .1);
  height: 30px;
}

我在我的jsfiddle上调整了更多CSS，但这些是您需要的更改才能让它发挥作用。

CSS乱七八糟的字母/单词在新行--Overflow Wrapping

1 个答案: