html - 选取框不显示所有文本

Question

此片段并未显示所有文本(大约 700 个单词分布在 100 行/段落中)。 只显示大约 10 行/段落，然后重复这些内容。

.marquee {
position: relative;
width: 100%;
height: 410px;
overflow: hidden;
animation: marquee 8s linear infinite;
}
@keyframes marquee {
0% {top: 10em}
100% {top: -2em}
}

<p class="marquee">text</p>

导致这种情况的缺失和/或错误是什么？

请提供一些帮助以启用显示所有文本的选取框。

最好的问候，

鲁巴斯

Answer 1

您可以添加以下 css 属性以显示内容。

.marquee p
{
    white-space:nowrap;
}

试试这个片段

.areas {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.marquee {
  position: relative;
  box-sizing: border-box;
  animation: marquee 15s linear infinite;
  color: #0093dd;
}


/* Make it move! */

@keyframes marquee {
  0% {
    top: 100%;
  }
  100% {
    top: 0;
    transform: translateY(-100%);
  }
}


/* Make it look pretty */

.microsoft .marquee {
  font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.microsoft:before,
.microsoft::before,
.microsoft:after,
.microsoft::after {
  z-index: 1;
  content: '';
  position: absolute;
  pointer-events: none;
  width: 100%;
  background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0));
}

.microsoft:after,
.microsoft::after {
  transform: rotate(180deg);
}

.microsoft:before,
.microsoft::before {}

<div class="microsoft areas">
  <p class="marquee">
    Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences
    is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance,
    in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling
    idea,” because it controls what happens in the rest of the paragraph.
    <br><br> Before you can begin to determine what the composition of a particular paragraph will be, you must first decide on an argument and a working thesis statement for your paper. What is the most important idea that you are trying to convey to
    your reader? The information in each paragraph must be related to that idea. In other words, your paragraphs should remind your reader that there is a recurrent relationship between your thesis and the information in each paragraph. A working thesis
    functions like a seed from which your paper, and your ideas, will grow. The whole process is an organic one—a natural progression from a seed to a full-blown paper where there are direct, familial relationships between all of the ideas in the paper.
    <br><br> The decision about what to put into your paragraphs begins with the germination of a seed of ideas; this “germination process” is better known as brainstorming. There are many techniques for brainstorming; whichever one you choose, this stage
    of paragraph development cannot be skipped. Building paragraphs can be like building a skyscraper: there must be a well-planned foundation that supports what you are building. Any cracks, inconsistencies, or other corruptions of the foundation can
    cause your whole paper to crumble.
    <br><br> So, let’s suppose that you have done some brainstorming to develop your thesis. What else should you keep in mind as you begin to create paragraphs? Every paragraph in a paper should be:
    <br><br>

    <b>Unified:</b> All of the sentences in a single paragraph should be related to a single controlling idea (often expressed in the topic sentence of the paragraph). Clearly related to the thesis: The sentences should all refer to the central idea,
    or thesis, of the paper (Rosen and Behrens 119).

    <br><br>
    <b>Coherent:</b> The sentences should be arranged in a logical manner and should follow a definite plan for development (Rosen and Behrens 119).
  </p>
</div>