Skip to content
This repository was archived by the owner on Oct 17, 2025. It is now read-only.

added anywhere value to overflow-wrap property #1284

Merged
merged 2 commits into from
Jan 17, 2019
Merged

added anywhere value to overflow-wrap property #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf2d8f0
added anywhere value to overflow-wrap property
estelle Jan 10, 2019
5a6cb3d
Show better the difference between break-word and anywhere
Jan 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions live-examples/css-examples/text/overflow-wrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
#example-element {
background-color: gold;
.default-example {
display: flex;
}

.default-example > div {
background-color: lemonchiffon;
padding: .75em;
width: 200px;
height: 200px;
}

#example-element {
background-color: gold;
}
10 changes: 9 additions & 1 deletion live-examples/css-examples/text/overflow-wrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,25 @@
</button>
</div>

<div class="example-choice" initial-choice="true">
<div class="example-choice">
<pre><code class="language-css">overflow-wrap: break-word;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>
<div class="example-choice">
<pre><code class="language-css">overflow-wrap: anywhere;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

</section>

<div id="output" class="output large hidden">
<section id="default-example" class="default-example">
<div class="transition-all">This element is positioned before the example element, in a flex layout.</div>
<div id="example-element" class="transition-all">Most of this text uses short words that won't need to break. However, <b>Antidisestablishmentarianism</b> is a very long word!</div>
<div class="transition-all">This element is positioned after the example element, in a flex layout.</div>
</section>
</div>