How to prevent hyphenation using text overflow

Question

I'm trying to set a maximum number of lines for some titles, but the problem is that sometimes a line ends with a hyphen. What I need is that if a word has to be broken, it should be completely hidden and the ellipses placed after the previous word. This code shows the problem: #head{width:300px;font-size:20px;display:-webkit-box!important;color:#000000!important;text-overflow:ellipsis!importa

P粉231112437 · Answer

To achieve the effect of completely hiding the word break and placing the ellipsis after the previous word, you can use JavaScript to manipulate the text content. Here is an example of how to modify the code to achieve this:

function truncateText(element, maxLength) {
  const text = element.innerText;
  if (text.length <= maxLength) return;

  const truncatedText = text.slice(0, maxLength);
  const lastSpaceIndex = truncatedText.lastIndexOf(' ');

  element.innerText = truncatedText.slice(0, lastSpaceIndex) + '...';
}

const headlineElement = document.getElementById('headline');
truncateText(headlineElement, 100);

#head {
  width: 300px;
  font-size: 20px;
  display: -webkit-box !important;
  color: #000000 !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}


  
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a

In this code, the JavaScript function truncateText is used to truncate the text content when it exceeds the specified maximum length. This function finds the last space character within the maximum length and replaces the remaining text with ellipses.

You can adjust the maxLength parameter to the desired number of characters before adding the ellipsis.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial