Why dashes are incompatible with inner <span> elements?

Question

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like .

https://i.sstatic.net/JGl1M.png

The Code (sandbox: https://codepen.io/anon/pen/ayzxpM):

.limit {
  max-width: 50px;
  hyphens: auto;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit">
  <p>
    Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>

Using the lang attribute

Can adding the lang attribute as Vadim Ovchinnikov suggested (

<div class="limit" lang="en">

) improve results on certain platforms and browsers? On Windows 10, Firefox 54, here is an example:

https://i.sstatic.net/lrDd4.png

However, it still seems to have bugs. The hyphen color should be black and there are missed opportunities for line breaks between words, ignoring the set max-width for the container.

css css-hyphens

Answer 1

Answer №1

Yes, it is possible to use span elements in various browsers. Perhaps the issue you encountered was due to an unrecognized word. Let me provide an example using a common English word that displays well in IE (and should work in Edge) and FF on Win7:

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
    <title>Demo</title>
<style>
div {
    max-width: 50px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 20px;
    background-color: #eee;
}
span {
    color: red;
}
</style>
</head>
<body>
    <div>
        <p>Incomprehensibilities</p>
        <p>Incom<span>pre</span>hensibilities</p>
    </div>
</body>
</html>

Please note that this method may not function properly in Chrome on Windows as of June 2018, as hyphenation support is still lacking. Additionally, it won't work in any iOS browser. However, soft hyphens could be a suitable alternative in such cases. Despite these limitations, I believe it's valuable to share this information for those interested in understanding the mechanism behind it.

Answer 2

Yes, it is possible to use span elements in various browsers. Perhaps the issue you encountered was due to an unrecognized word. Let me provide an example using a common English word that displays well in IE (and should work in Edge) and FF on Win7:

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
    <title>Demo</title>
<style>
div {
    max-width: 50px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 20px;
    background-color: #eee;
}
span {
    color: red;
}
</style>
</head>
<body>
    <div>
        <p>Incomprehensibilities</p>
        <p>Incom<span>pre</span>hensibilities</p>
    </div>
</body>
</html>

Please note that this method may not function properly in Chrome on Windows as of June 2018, as hyphenation support is still lacking. Additionally, it won't work in any iOS browser. However, soft hyphens could be a suitable alternative in such cases. Despite these limitations, I believe it's valuable to share this information for those interested in understanding the mechanism behind it.

Answer 3

Answer №2

Chrome's support for the hyphens property is limited to Mac and Android platforms, making it difficult to implement on Windows.

In Firefox, IE, and Edge on Windows, there doesn't seem to be any noticeable difference between having a span element present or absent in this code.

To make it work across all browsers, you'll need to set the lang attribute for the container and include vendor prefixes (such as -ms-hyphens for IE/Edge and -webkit-hyphens for Safari). See demo below:

.limit {
  max-width: 50px;
  font-size: 20px;
  /* Safari */
  -webkit-hyphens: auto;
  /* IE, Edge */
  -ms-hyphens: auto;
  hyphens: auto;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit" lang="en">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>

If you want the hyphens feature to work in all browsers, consider manually inserting  where you want hyphens instead of using the CSS hyphens property.

.limit {
  max-width: 50px;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit">
  <p>
   Apple&shy;tree&shy;fruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruitthing
  </p>
</div>

Answer 4

Chrome's support for the hyphens property is limited to Mac and Android platforms, making it difficult to implement on Windows.

In Firefox, IE, and Edge on Windows, there doesn't seem to be any noticeable difference between having a span element present or absent in this code.

To make it work across all browsers, you'll need to set the lang attribute for the container and include vendor prefixes (such as -ms-hyphens for IE/Edge and -webkit-hyphens for Safari). See demo below:

.limit {
  max-width: 50px;
  font-size: 20px;
  /* Safari */
  -webkit-hyphens: auto;
  /* IE, Edge */
  -ms-hyphens: auto;
  hyphens: auto;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit" lang="en">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>

If you want the hyphens feature to work in all browsers, consider manually inserting  where you want hyphens instead of using the CSS hyphens property.

.limit {
  max-width: 50px;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}

<div class="limit">
  <p>
   Apple&shy;tree&shy;fruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruitthing
  </p>
</div>

Answer 5

Answer №3

hyphens: manual

combined with

&shy;

might be effective. For more information, please refer to the documentation available at this link.

This particular code snippet on CodePen appears to be functional:

<div class="limit">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruit&shy;thing
  </p>
</div>

CSS

.limit {
  hyphens: manual;
}

Answer 6

hyphens: manual

combined with

&shy;

might be effective. For more information, please refer to the documentation available at this link.

This particular code snippet on CodePen appears to be functional:

<div class="limit">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruit&shy;thing
  </p>
</div>

CSS

.limit {
  hyphens: manual;
}

Why dashes are incompatible with inner <span> elements?

Using the lang attribute

Answer №1

Answer №2

Answer №3

Similar questions

Place your cursor over the following element to take control

In what way can a programmer create HTML tailored to a designer's needs, even without a comprehensive grasp of

Adjust the size of an element in response to changes in the size of

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

Conceal descendant of list item and reveal upon clicking

Implementing a horizontal scrollbar for an AJAX datatable

What is the best way to loop through an array and apply classes to each element separately?

Scrollbar appearing in Safari (Windows) despite increasing the height

How can I modify the CSS styles for a custom jQuery widget?

How come my label and input are showing up in my navigation bar?

Chrome is where all the action happens, while Firefox prefers to keep things on the left

Press the button to automatically scroll to a designated div section

Encountering issues with loading styles in Vue single file components

Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

Having Difficulty Formatting HTML Input in Next.js

Encountering an error while trying to load a CSS file in a React project using webpack due

Checking the alignment of a label or element in the center of a webpage using javascript

Tips for maintaining a single-line div while adding ellipses:

Unleash the potential of a never-ending expansion for grid cells on Canvas

Incorporate my personalized CSS file into the Bootstrap 4 development tools