How to Stop CSS Hyphenation, No Dash Between Words

how to stop CSS hyphenation, no dash between words

try

-webkit-hyphens:manual;
-moz-hyphens:manual;
hyphens:manual;

putting them on auto is causing the issue

also you can completely turn them off using

  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;

Is it possible to prevent linebreaks between hyphenated words in CSS?

Did you try using "non-breaking hyphen"? No CSS needed. It's a normal html entity.

Try this ‑

This is an example

Sample‑text

Show hyphens only when necessary? (soft-hyphens doesn't cut it)

Use a container with display: inline-block around the long words.

body {   margin-left: 30px;}div {   border: solid 1px black;}.wide {  border: solid 1px blue;      width: 500px;}.narrow {   border: solid 1px red;  width: 360px;} h2 {   font-family: 'Courier New';    font-weight: 400;    font-size: 87px;  }code { background-color: #eee;}
.unbreakable {display:inline-block}

<p> <code>Super&shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p><p><div class="narrow"><h2>Hi <span class="unbreakable">Super­man</span></h2></div>
<p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/>This uses the same code as the previous example</p><div class="wide"><h2>Hi <span class="unbreakable">Super­man</span></h2></div>

How to make a dash/hyphen not break a word in a table

Either you can replace the hyphen with a non-breaking hyphen, ‑, or you can style the cell using the CSS property white-space: nowrap which will prevent any type of line break from being automatically added.

Bootstrap gives you the CSS class text-nowrap which contains the CSS property white-space: nowrap, so with Bootstrap you could, for example, add this class to the table cell:

<td class="text-nowrap">ABCDE-S01</td>

How to prevent css auto hyphenation for email addresses

There is no way in CSS to refer to parts of text without making them elements (unless they can be referred to as pseudo-elements, like :first-letter, but there are just a few pseudo-elements currently in CSS, and they don’t help here).

So you need to process the content programmatically, either server-side or client-side. Recognizing e-mail addresses is nontrivial, and you might consider handling some other constructs as well (e.g., URLs). For performance reasons, you might do this in client-side JavaScript so that the processing starts only after the document has loaded. Alternatively, if the data is saved on the server in HTML format, you could perform the processing before saving the data (though this increases the amount of data to be sent to browsers).

How to prevent line break at hyphens in all browsers

I’m afraid there’s no simpler way to do it reliably than splitting the text to “words” (sequences of non-whitespace characters separated by whitespace) and wrapping each “word” that contains a hyphen inside nobr markup. So input data like bla bla foo-bar bla bla would be turned to bla bla <nobr>foo-bar</nobr> bla bla.

You might even consider inserting nobr markup whenever the “word” contains anything but letters and digits. The reason is that some browsers may even break strings like “2/3” or “f(0)” (see my page on oddities of line breaking in browsers).

css break word with hyphen

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use ­ (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

.content {  max-height: 80px;  width: 200px;  overflow-x: hidden;  word-wrap: break-word;  padding: 10px;  font-weight: bold;  font-size: 16px;  border: solid 1px #000;}

Using soft hyphen:<div class="content">BERUFSBILDUNGSZEN­TRUM</div>    
Using automatic hyphenation (doesn't work in Chrome)<div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div>
Soft hyphen not displayed if it doesn't break there<div class="content" style="width: 400px; ">BERUFSBILDUNGSZEN­TRUM</div>

---

Related Topics