Question 182714 in Html Question posted in
Some basic documentation can be found here.

Html – How to prevent word breaking with using text-overflow

I’m trying to set a max number of rows for some headlines, but the problem is that sometimes a row will end with a broken word. what i need is that if a word would have to break, it should be hidden completely, and the ellipses placed after the previous word.

this code shows the issue:

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

<div id="head">

    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


</div>

</html>

the word "ever" is broken in the middle, can i somehow prevent this from happening?

Tags:

2

Answers


  1. 0 
    .text-oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: pre-wrap;
}
    <!DOCTYPE html>
<html>

<div class="text-oneline">
  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 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 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 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 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  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 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 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 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 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
</div>

</html>
    Login or Signup to reply.
  2. 0

    To achieve the desired effect of hiding a broken word completely and placing the ellipsis after the previous word, you can use JavaScript to manipulate the text content. Here’s an example of how you can modify your code to achieve this:

    <!DOCTYPE html>
<html>
<head>
    <style>
        #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;
        }
    </style>
</head>
<body>
    <div id="head">
        <span id="headline">
            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
        </span>
    </div>

    <script>
        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);
    </script>
</body>
</html>

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

    You can adjust the maxLength parameter to your desired number of characters before the ellipsis is added.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search