IT quiz
All questions Sign in Sign up
JavaScriptHTMLCSSPostgreSQLPHPLinuxGitDockerSCSSTypeScriptSQLVueDNSGofrontend (web)RedisbackendGitlabCI/CDVitewebpackNode.jsHTTPPythonKotlinNuxt

Question #90

Author: admin
tags: CSS  
The CSS overflow-wrap property is applied to inline elements.
With the break-word value, the property allows you to insert a line break into a very long word if it does not fit into the container.
<div class="block">
  <span class="text">
    VeryVeryVeryVeryVeryVeryVeryVeryVeryLongWord1
  </span>
  <span class="text">
    VeryVeryVeryVeryVeryVeryVeryVeryVeryLongWord2
  </span>
</div>
.block {
  border: 1px solid black;
  width: 100px; 
  font-size: 20px;
  display: flex;
  overflow: hidden;
}

.text {
  overflow-wrap: break-word; 
}
The 100px width of the container is not enough to display one long word.
How will the text with such CSS be displayed?
The first word will be partially visible, the second word will not be visible
The first word will be partially visible, the second word will be located under the second word and will also be partially visible
The first word will be fully visible, the second word will not be visible
Both words will be fully visible, the second word will be located under the first
The overflow-wrap property is applied only to inline elements. But inside a flex container, any inline element automatically becomes a block element. Therefore, the property will not work.
To make each word visible in this case, you can put each <span> tag inside a block wrapper, which needs to be set to the overflow: hidden property.
For example:
<div class="block">
  <div style="overflow: hidden;">
    <span class="text">
      VeryVeryVeryVeryVeryVeryVeryVeryVeryLongWord1
    </span>
  </div>
  <div style="overflow: hidden;">
    <span class="text">
      VeryVeryVeryVeryVeryVeryVeryVeryVeryLongWord2
    </span>
  </div>
</div>
Rate the difficulty of the question:
easyhard
←Previous question (CSS)
Next question (CSS)
→
2022 — 2023 IT quiz