Hyphens

Internet Explorer Chrome Opera Safari Firefox Android iOS
10.0+ 13.0+ 5.1+ 8.0+ 4.0+ 4.2+
CSS 1 CSS 2 CSS 2.1 CSS 3

Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка.

Так, для русского языка следует добавить lang=”ru” к тегу или непосредственно к абзацу текста.

Синтаксис

hyphens: none | manual | auto

Значения

none Слова не переносятся, даже при наличии в тексте мягких переносов ­. manual Переносы слов в тексте происходят в тех местах, где добавлен ­ или , если их нет, то переносы не делаются. auto Браузер автоматически добавляет переносы слов на основе встроенного словаря переносов.

Пример

HTML5CSS3IECrOpSaFx

Никотинамидадениндинуклеотидфосфат — широко
распространённый в природе кофермент некоторых
дегидрогеназ — ферментов, катализирующих
окислительно-восстановительные реакции в
живых клетках.

Результат примера в браузере Internet Explorer показан на рис. 1.

Hyphens

Рис. 1. Переносы слов

Объектная модель

[window.]document.getElementById(“elementID”).style.hyphens

Браузеры

  • Internet Explorer поддерживает свойство -ms-hyphens.
  • Chrome, Safari, Androis и iOS поддерживают свойство -webkit-hyphens.
  • Firefox поддерживает свойство -moz-hyphens.
  • Chrome не поддерживает значение auto, поэтому переносы слов в нём не работают.

The Hyphen

WebCT Users:A hyphen “icon” embedded in your text — – — indicates either that a hyphen is called for at that point, or (if you have a hyphen there already) that the hyphen is not appropriate. We hope that this page will explain why.

Although smart word-processors seem to have taken over the job of hyphenating broken words at the right-hand end of our lines and spellcheckers can review our use of hyphens in other places, these technological marvels are by no means infallible.

Microsoft Word, for example, flags as misspelled almost any word with an unhyphenated prefix: antidiscrimination and cogeneration, for example, are marked as misspelled words and re-sign, co-bra, ever-green, and be-loved are marked as correctly hyphenated words by that software.

* Generally, it is a good idea not to use justified text in academic papers; that will cut down on a lot of decisions about hyphenating. The APA Publication Manual, in fact, insists that you not break words at line-endings in any case, but that can lead to lines that are too brief and aesthetically unbalanced.

The rules for hyphenating at line endings are so complicated that no one can be expected to keep track of them.

If you're ever in a situation where you have to hyphenate at line-breaks, go to a dictionary—unless you can explain why you would break experience between the e and the r, that is, and then you can do whatever you want. Remember that if you adjust one line-break for aesthetic reasons, that may well affect subsequent line-breaks in the text.

Probably the best reference text for these decisions (next to looking up everything in a dictionary, that is) is The Chicago Manual of Style.

An excellent online resource on hyphen use is the Editing Workshop by Sonia Jaffe Robbins at New York University.

Tom Little voices a dissenting opinion in “The Great Hyphenation Hoax,” which seeks to free writers of the innumerable rules and imponderable tables of the Chicago Manual of Style.

Hyphens have other uses

  1. creating compound words, particularly modifiers before nouns (the well-known actor, my six-year-old daughter, the out-of-date curriculum
  2. writing numbers twenty-one to ninety-nine and fractions (five-eighths, one-fourth)
  3. creating compounds on-the-fly for fly-by-night organizations
  4. adding certain prefixes to words: When a prefix comes before a capitalized word or the prefix is capitalized, use a hyphen (non-English, A-frame, I-formation). The prefixes self-, all-, and ex- nearly always require a hyphen (ex-husband, all-inclusive, self-control), and when the prefix ends with the same letter that begins the word, you will often use a hyphen (anti-intellectual, de-emphasize), but not always (unnatural, coordinate, cooperate). By all means, use a good dictionary when in doubt! For further information about compound nouns and compound modifiers, see the separate section on Compound Words.

There is no space between a hyphen and the character on either side of it.

With a series of nearly identical compounds, we sometimes delay the final term of the final term until the last instance, allowing the hyphen to act as a kind of place holder, as in

  • The third- and fourth-grade teachers met with the parents.
  • Both full- and part-time employees will get raises this year.
  • We don't see many 3-, 4-, and 5-year-old children around here.

Be careful not to overuse this feature of the hyphen; readers have to wait until that final instance to know what you're talking about, and that can be annoying.

period || question mark || exclamation mark || colon || semicolon || dash parentheses || brackets || ellipsis || apostrophe || quotation marks || comma || slash

hyphens

The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element. Not all languages are supported yet, and support depends on the specific browser.

Syntax

p {
hyphens: none | manual | auto
}

hyphens: none

Words are never hyphenated at line breaks, even if characters inside the word suggest where hyphenation could or should go.

hyphens: manual

Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity:

  • U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered. Literally a “-“.
  • U+00AD (SHY): an invisible, “soft” hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.
See also:  6 doctor who literary episodes you should watch before the premiere

hyphens: auto

Words can be broken at appropriate hyphenation points either as determined by hyphenation characters (see above) inside the word or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via @hyphenation-resource).

Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word.

hyphens: all

Deprecated, do not use. This was only in the spec temporarily for testing.

Demo

The demo below has a bunch of paragraphs and everything is set to hyphens: auto; to demonstrate the concept of hyphenation. The lang attribute is set to en on the parent element.

Check out this Pen!

Related Properties

  • word-break
  • hyphenate-character
  • hyphenate-limit-zone
  • hyphenate-limit-word
  • hyphenate-limit-lines
  • hyphenate-limit-last
  • hyphenate-resources
  • @hyphenate-resource

Other Resources

Browser Support

ChromeFirefoxIEEdgeSafari
86 6* 10* 12* 5.1*
Android ChromeAndroid FirefoxAndroidiOS Safari
81 68 81 4.2-4.3*

Safari 5+ requires -webkit-, Firefox 6+ requires -moz-, IE 10+ requires -ms-, iOS 4.2+ requires -webkit-.

Chrome < 55 and Android browser actually support -webkit-hyphens: none, which is the default value, but none of the other values.

In Firefox and Internet Explorer, automatic hyphenation only works for some languages (defined with the lang attribute). See this note for a comprehensive list of supported languages.

hyphens

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

Syntax

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

The hyphens property is specified as a single keyword value chosen from the list below.

Values

none Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace. manual Words are broken for line-wrapping only where characters inside the word suggest line break opportunities.

See Suggesting line break opportunities below for details. auto The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses.

However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection when present.

Note:

Hyphens

There are two commandments about this misunderstood punctuation mark. First, hyphens must never be used interchangeably with dashes (see the Dashes section), which are noticeably longer. Second, there should not be spaces around hyphens.

Incorrect: 300—325 people Incorrect: 300 – 325 people Correct: 300-325 people

Hyphens' main purpose is to glue words together. They notify the reader that two or more elements in a sentence are linked. Although there are rules and customs governing hyphens, there are also situations when writers must decide whether to add them for clarity.

Hyphens Between Words

Rule 1. Generally, hyphenate two or more words when they come before a noun they modify and act as a single idea. This is called a compound adjective.

  • Examples: an off-campus apartment state-of-the-art design
  • When a compound adjective follows a noun, a hyphen is usually not necessary.
  • Example: The apartment is off campus.

However, some established compound adjectives are always hyphenated. Double-check with a dictionary or online.

Example: The design is state-of-the-art.

Rule 2a. A hyphen is frequently required when forming original compound verbs for vivid writing, humor, or special situations.

Examples: The slacker video-gamed his way through life. Queen Victoria throne-sat for six decades.

Rule 2b. When writing out new, original, or unusual compound nouns, writers should hyphenate whenever doing so avoids confusion.

Examples: I changed my diet and became a no-meater. No-meater is too confusing without the hyphen.

The slacker was a video gamer.

Video gamer is clear without a hyphen, although some writers might prefer to hyphenate it.

Writers using familiar compound verbs and nouns should consult a dictionary or look online to decide if these verbs and nouns should be hyphenated.

Rule 3. An often overlooked rule for hyphens: The adverb very and adverbs ending in ly are not hyphenated.

  1. Incorrect: the very-elegant watch Incorrect: the finely-tuned watch
  2. This rule applies only to adverbs. The following two examples are correct because the ly words are not adverbs:
  3. Correct: the friendly-looking dog Correct: a family-owned cafe

Rule 4. Hyphens are often used to tell the ages of people and things. A handy rule, whether writing about years, months, or any other period of time, is to use hyphens unless the period of time (years, months, weeks, days) is written in plural form:

With hyphens: We have a two-year-old child. We have a two-year-old.

No hyphens: The child is two years old. (Because years is plural.)

Exception: The child is one year old. (Or day, week, month, etc.)

  • Note that when hyphens are involved in expressing ages, two hyphens are required. Many writers forget the second hyphen:
  • Incorrect: We have a two-year old child.
  • Without the second hyphen, the sentence is about an “old child.”
See also:  Is the first dictionary pronunciation the best one?

Rule 5. Never hesitate to add a hyphen if it solves a possible problem. Following are two examples of well-advised hyphens:

Confusing: Springfield has little town charm. With hyphen: Springfield has little-town charm.

Without the hyphen, the sentence seems to say that Springfield is a dreary place. With the hyphen, little-town becomes a compound adjective, making the writer's intention clear: Springfield is a charming small town.

Confusing: She had a concealed weapons permit. With hyphen: She had a concealed-weapons permit.

With no hyphen, we can only guess: Was the weapons permit hidden from sight, or was it a permit for concealed weapons? The hyphen makes concealed-weapons a compound adjective, so the reader knows that the writer meant a permit for concealed weapons.

Rule 6. When using numbers, hyphenate spans or estimates of time, distance, or other quantities. Remember not to use spaces around hyphens.

Examples: 3:15-3:45 p.m. 1999-2016

  1. 300-325 people
  2. Note: Most publishers use the slightly longer en dash instead of a hyphen in this situation.

Examples: 3:15–3:45 p.m. 1999–2016

300–325 people

Here is how to type an en dash: On a PC, hold down the ALT key and type 0150 on the numeric keypad located on the far right of the keyboard. On a Mac, hold down the Option key and type the minus sign located at the top of the keyboard.

Rule 7. Hyphenate all compound numbers from twenty-one through ninety-nine.

Examples: thirty-two children one thousand two hundred twenty-one dollars

Rule 8a. Hyphenate all spelled-out fractions. But do not hyphenate fractions introduced with a or an.

  • Examples: More than one-third of registered voters oppose the measure.
  • More than a third of registered voters oppose the measure.

Rule 8b. When writing out numbers with fractions, hyphenate only the fractions unless the construction is a compound adjective.

Correct: The sign is five and one-half feet long. Correct: A five-and-one-half-foot-long sign. Incorrect: The sign is five-and-one-half feet long.

Rule 9a. Do not hyphenate proper nouns of more than one word when they are used as compound adjectives.

Incorrect: She is an Academy-Award nominee. Correct: She is an Academy Award nominee.

Rule 9b. However, hyphenate most double last names.

Example: Sir Winthrop Heinz-Eakins will attend.

Rule 10. Many editors do not hyphenate certain well-known expressions. They believe that set phrases, because of their familiarity (e.g., high school, ice cream, twentieth century), can go before a noun without risk of confusing the reader.

  1. Examples: a high school senior an ice cream cone
  2. a twentieth century throwback
  3. However, other editors prefer hyphenating all compound modifiers, even those with low risk of ambiguity.
  4. Examples: a high-school senior an ice-cream cone
  5. a twentieth-century throwback

Rule 11. When in doubt, look it up. Some familiar phrases may require hyphens. For instance, is a book up to date or up-to-date? Don't guess; have a dictionary close by, or look it up online.

Hyphens with Prefixes and Suffixes

A prefix (a, un, de, ab, sub, post, anti, etc.) is a letter or set of letters placed before a root word. The word prefix itself contains the prefix pre.

Prefixes expand or change a word's meaning, sometimes radically: the prefixes a, un, and dis, for example, change words into their opposites (e.g.

, political, apolitical; friendly, unfriendly; honor, dishonor).

Rule 1. Hyphenate prefixes when they come before proper nouns or proper adjectives.

Examples: trans-American mid-July

Rule 2. In describing family relations, great requires a hyphen, but grand becomes part of the word without a hyphen.

  • Examples: My grandson and my granduncle never met.
  • My great-great-grandfather fought in the Civil War.
  • Do not hyphenate half brother or half sister.

Rule 3. For clarity, many writers hyphenate prefixes ending in a vowel when the root word begins with the same letter.

  1. Example: ultra-ambitious semi-invalid
  2. re-elect

Rule 4. Hyphenate all words beginning with the prefixes self-, ex- (i.e., former), and all-.

  • Examples: self-assured ex-mayor
  • all-knowing

Rule 5. Use a hyphen with the prefix re when omitting the hyphen would cause confusion with another word.

Examples: Will she recover from her illness? I have re-covered the sofa twice. Omitting the hyphen would cause confusion with recover.

I must re-press the shirt.

Omitting the hyphen would cause confusion with repress.

The stamps have been reissued.

A hyphen after re- is not needed because there is no confusion with another word.

Rule 6. Writers often hyphenate prefixes when they feel a word might be distracting or confusing without the hyphen.

Examples: de-ice With no hyphen we get deice, which might stump readers.

co-worker

With no hyphen we get coworker, which could be distracting because it starts with cow.

A suffix (y, er, ism, able, etc.) is a letter or set of letters that follows a root word. Suffixes form new words or alter the original word to perform a different task. For example, the noun scandal can be made into the adjective scandalous by adding the suffix ous. It becomes the verb scandalize by adding the suffix ize.

Rule 1. Suffixes are not usually hyphenated. Some exceptions: -style, -elect, -free, -based.

  1. Examples: Modernist-style paintings Mayor-elect Smith sugar-free soda
  2. oil-based sludge

Rule 2. For clarity, writers often hyphenate when the last letter in the root word is the same as the first letter in the suffix.

Examples: graffiti-ism wiretap-proof

Rule 3. Use discretion—and sometimes a dictionary—before deciding to place a hyphen before a suffix. But do not hesitate to hyphenate a rare usage if it avoids confusion.

Examples: the annual dance-athon an eel-esque sea creature

Although the preceding hyphens help clarify unusual terms, they are optional and might not be every writer's choice. Still, many readers would scratch their heads for a moment over danceathon and eelesque.

See also:  Does cbd oil work? the science behind cannabidiol

Are you ready for the quiz?

How to use a hyphen (-)

Hyphens are used to link words and parts of words. They are not as common today as they used to be, but there are three main cases where you should use them:

  • in compound words
  • to join prefixes to other words
  • to show word breaks

Hyphens in compound words

Hyphens are used in many compound words to show that the component words have a combined meaning (e.g. a pick-me-up, mother-in-law, good-hearted) or that there is a relationship between the words that make up the compound: for example, rock-forming minerals are minerals that form rocks. But you don’t need to use them in every type of compound word.

Compound adjectives

Compound adjectives are made up of a noun + an adjective, a noun + a participle, or an adjective + a participle. Many compound adjectives should be hyphenated. Here are some examples:

noun + adjective noun + participle adjective + participle
accident-prone computer-aided good-looking
sugar-free power-driven quick-thinking
carbon-neutral user-generated bad-tempered
sport-mad custom-built fair-haired
camera-ready muddle-headed open-mouthed

With compound adjectives formed from the adverb well and a participle (e.g. well-known), or from a phrase (e.g. up-to-date), you should use a hyphen when the compound comes before the noun:

  • well-known brands of coffee
  • an up-to-date account
  • but not when the compound comes after the noun:
  • His music was also well known in England.
  • Their figures are up to date.

It’s important to use hyphens in compound adjectives describing ages and lengths of time: leaving them out can make the meaning ambiguous. For example, 250-year-old trees clearly refers to trees that are 250 years old, while 250 year old trees could equally refer to 250 trees that are all one year old.

Compound verbs

Use a hyphen when a compound formed from two nouns is made into a verb, for example:

noun verb
an ice skate to ice-skate
a booby trap to booby-trap
a spot check to spot-check
a court martial to court-martial

Phrasal verbs

You should NOT put a hyphen within phrasal verbs – verbs made up of a main verb and an adverb or preposition. For example:

Phrasal verb Example
build up You should continue to build up your pension.
break in They broke in by forcing a lock on the door.
stop off We stopped off in Hawaii on the way home.

If a phrasal verb is made into a noun, though, you SHOULD use a hyphen:

Noun Example
build-up There was a build-up of traffic on the ring road.
break-in The house was unoccupied at the time of the break-in.
stop-off We knew there would be a stop-off in Singapore for refuelling.

Compound nouns

A compound noun is one consisting of two component nouns. In principle, such nouns can be written in one of three different ways:

one word two words hyphenated
aircrew air crew air-crew
playgroup play group play-group
chatroom chat room chat-room

In the past, these sorts of compounds were usually hyphenated, but the situation is different today. The tendency is now to write them as either one word or two separate words. However, the most important thing to note is that you should choose one style and stick to it within a piece of writing. Don’t refer to a playgroup in one paragraph and a play-group in another.

Hyphens joining prefixes to other words

Hyphens can be used to join a prefix to another word, especially if the prefix ends in a vowel and the other word also begins with one (e.g. pre-eminent or co-own). This use is less common than it used to be, though, and one-word forms are becoming more usual (e.g. prearrange or cooperate).

Use a hyphen to separate a prefix from a name or date, e.g. post-Aristotelian or pre-1900.

Use a hyphen to avoid confusion with another word: for example, to distinguish re-cover (= provide something with a new cover) from recover (= get well again).

Hyphens showing word breaks

Hyphens can also be used to divide words that are not usually hyphenated.

They show where a word is to be divided at the end of a line of writing. Always try to split the word in a sensible place, so that the first part does not mislead the reader: for example, hel-met not he-lmet; dis-abled not disa-bled.

Hyphens are also used to stand for a common second element in all but the last word of a list, e.g.:

  1. You may see a yield that is two-, three-, or fourfold.
  2. Back to punctuation.
  3. You may also be interested in
  4. Exclamation mark (!)
  5. Question mark (?)
  6. Dash (–)

See more from Punctuation

CSS hyphens Property

Set different hyphenations:

div.a {  -webkit-hyphens: none;  -ms-hyphens: none;  hyphens: none;}div.b {  -webkit-hyphens: manual;  -ms-hyphens: manual;  hyphens: manual;}div.c {  -webkit-hyphens: auto;  -ms-hyphens: auto;  hyphens: auto;

}

Try it Yourself »

The hyphens property defines whether hyphenation is allowed to create more soft wrap opportunities within a line of text.

Default value:

Inherited:

Animatable:

Version:

JavaScript syntax:

manual
yes
no. Read about animatable
CSS3
object.style.hyphens=”none”

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
hyphens 55.0 10.0 -ms- 43.0 5.1 -webkit- 44.0

CSS Syntax

hyphens: none|manual|auto|initial|inherit;

Property Values

Value Description
none Words are not hyphenated
manual Default. Words are only hyphenated at ‐ or ­ (if needed)
auto Words are hyphenated where the algorithm is deciding (if needed)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Be the first to comment

Leave a Reply

Your email address will not be published.


*