From d714a90664b9e977bc1c920c78ec4720446ac0f3 Mon Sep 17 00:00:00 2001 From: Sebastian Simon <37915283+SebastianSimon@users.noreply.github.com> Date: Tue, 9 Mar 2021 08:30:22 +0100 Subject: [PATCH] `` is an element, not a property; also improved grammar. (#2931) * `` is an element, not a property; grammar. * Rephrase sentence for correctness and simplicity * Update files/en-us/web/css/css_text/wrapping_text/index.html Co-authored-by: Rachel Andrew --- .../web/css/css_text/wrapping_text/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_text/wrapping_text/index.html b/files/en-us/web/css/css_text/wrapping_text/index.html index 6736b2986c13fd3..c58fdcc1706758c 100644 --- a/files/en-us/web/css/css_text/wrapping_text/index.html +++ b/files/en-us/web/css/css_text/wrapping_text/index.html @@ -15,19 +15,19 @@

What is overflowing text?

-

In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below, the long word is extending past the boundary of the box it is contained in.

+

In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.

{{EmbedGHLiveSample("css-examples/css-text/inline-overflow.html", '100%', 420)}}

-

CSS will display overflow in this way, because to do something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of {{cssxref("overflow")}} is visible, and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if overflow was set to hidden you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case your visitor will be able to see and read the content even if it looks a bit strange.

+

CSS will display overflow in this way, because to do something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of {{cssxref("overflow")}} is visible, and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if overflow was set to hidden you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.

-

If this next example you can see what happens if overflow is set to hidden.

+

In this next example you can see what happens if overflow is set to hidden.

{{EmbedGHLiveSample("css-examples/css-text/inline-overflow-hidden.html", '100%', 420)}}

Finding the min-content size

-

To find out the size the box needs to be to contain the contents with no overflows you can use the {{cssxref("min-content")}} keyword for the {{cssxref("width")}} or {{cssxref("inline-size")}} of the box.

+

To find the minimum size of the box that will contain its contents with no overflows, set the {{cssxref("width")}} or {{cssxref("inline-size")}} property of the box to {{cssxref("min-content")}}.

{{EmbedGHLiveSample("css-examples/css-text/min-content.html", '100%', 420)}}

@@ -49,19 +49,19 @@

Breaking long words

This might be useful if you want to prevent a large gap appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.

-

In the example below I have a checkbox and label. I want the label to break should it be too long for the box. However, I don't want it to break directly after the checkbox.

+

In the example below there is a checkbox and label. Let's say, you want the label to break should it be too long for the box. However, you don't want it to break directly after the checkbox.

{{EmbedGHLiveSample("css-examples/css-text/word-break-checkbox.html", '100%', 660)}}

Adding hyphens

-

To add hypens when words are broken use the CSS {{cssxref("hyphens")}} property. Using a value of auto and the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process use a value of manual, then insert a hard or soft break character into the string. A hard break (‐) will always break, even if it is not necessary to do so. A soft break (­) only breaks if breaking is needed.

+

To add hypens when words are broken, use the CSS {{cssxref("hyphens")}} property. Using a value of auto, the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of manual, then insert a hard or soft break character into the string. A hard break (‐) will always break, even if it is not necessary to do so. A soft break (­) only breaks if breaking is needed.

{{EmbedGHLiveSample("css-examples/css-text/hyphens.html", '100%', 660)}}

-

The <wbr> property

+

The <wbr> element

-

If you know where you want a long string to break then it is also possible to insert the HTML {{HTMLElement("wbr")}} element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.

+

If you know where you want a long string to break, then it is also possible to insert the HTML {{HTMLElement("wbr")}} element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.

In the below example the text breaks in the location of the {{HTMLElement("wbr")}}.