Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Question

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Is there a way to determine when a line will break so I can apply different styles?

The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, while buttons whose content fits on one line should have a border-radius of 30px.

A solution with its own problem: My initial approach was to change the class based on the number of characters, but it's not entirely accurate, as shown in the images below.

(18 characters) should have a border-radius of 13px because it breaks onto the next line

(19 characters) should have a border-radius of 30px since it does not break onto the next line

Question: Is there another method to achieve this?

Thank you

javascript css reactjs

Answer 1

Answer №1

If you're familiar with the height of a single line button, you can potentially determine the calculated height of buttons once the page has finished loading, compare them, and then adjust the class accordingly.

Answer 2

If you're familiar with the height of a single line button, you can potentially determine the calculated height of buttons once the page has finished loading, compare them, and then adjust the class accordingly.

Answer 3

Answer №2

To determine the border-radius of a div, consider the height of the div. If the height is greater than 42px (enough for text to be displayed in more than one line), set the border-radius to 20px; otherwise, set it to 13px.

//jquery solution 
$(".div").each(function() {
  if ($(this).outerHeight() > 42) {
    $(this).css("border-radius", "20px");
  } else {
    $(this).css("border-radius", "13px");
  }
});

//pure javascript solution
Array.from(document.querySelectorAll(".div")).forEach((element, index) => {
  if (element.offsetHeight > 42) {
    element.style.borderRadius = "20px";
  } else {
    element.style.borderRadius = "13px";
  }
});

//choose either one

.div {
  border: 1px solid #000;
  display: inline-block;
  padding: 8px;
  font-size: 16px;
  max-height: 42px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  Lorem Ipsun dolor
</div>

<div class="div">
  Lorem <br/> Ipsum dolor
</div>

The height of the div depends on your font properties such as font-size, line-height, font-family, and padding.

Answer 4

To determine the border-radius of a div, consider the height of the div. If the height is greater than 42px (enough for text to be displayed in more than one line), set the border-radius to 20px; otherwise, set it to 13px.

//jquery solution 
$(".div").each(function() {
  if ($(this).outerHeight() > 42) {
    $(this).css("border-radius", "20px");
  } else {
    $(this).css("border-radius", "13px");
  }
});

//pure javascript solution
Array.from(document.querySelectorAll(".div")).forEach((element, index) => {
  if (element.offsetHeight > 42) {
    element.style.borderRadius = "20px";
  } else {
    element.style.borderRadius = "13px";
  }
});

//choose either one

.div {
  border: 1px solid #000;
  display: inline-block;
  padding: 8px;
  font-size: 16px;
  max-height: 42px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  Lorem Ipsun dolor
</div>

<div class="div">
  Lorem <br/> Ipsum dolor
</div>

The height of the div depends on your font properties such as font-size, line-height, font-family, and padding.

Answer 5

Answer №3

Here's a suggestion for you:

Consider setting a fixed width for the text container and calculate how many characters can fit within that width based on the desired line break measurement (e.g. 20px/.5rem/ETC). If the number of characters exceeds the calculated limit, use JavaScript or CSS to force a line break and adjust the border radius accordingly.

While there may be alternative solutions available, this approach could potentially work with some additional tweaks and adjustments.

Answer 6

Here's a suggestion for you:

Consider setting a fixed width for the text container and calculate how many characters can fit within that width based on the desired line break measurement (e.g. 20px/.5rem/ETC). If the number of characters exceeds the calculated limit, use JavaScript or CSS to force a line break and adjust the border radius accordingly.

While there may be alternative solutions available, this approach could potentially work with some additional tweaks and adjustments.

Answer 7

Answer №4

If you want to check for line breaks in button text using RegEx, you can do so by checking the number of line breaks and applying styles based on the result.

    <script type="text/javascript">
     jQuery(document).ready(function() {
     var btnValue = document.getElementById('btn').innerText;
     var lineCount = (btnValue.match(/\n/g)||[]).length;
     if(lineCount > 0)
     {
        // Apply Styles Here
     }
    
    });
    </script>

    <body style="height:94%;" > ;
        <button id="btn">Lorem ipsum,
        <br>vero accusantium,
        <br>modi repellendus?
        <br>Enim nisi iusto.</button>
    </body>

Answer 8

If you want to check for line breaks in button text using RegEx, you can do so by checking the number of line breaks and applying styles based on the result.

    <script type="text/javascript">
     jQuery(document).ready(function() {
     var btnValue = document.getElementById('btn').innerText;
     var lineCount = (btnValue.match(/\n/g)||[]).length;
     if(lineCount > 0)
     {
        // Apply Styles Here
     }
    
    });
    </script>

    <body style="height:94%;" > ;
        <button id="btn">Lorem ipsum,
        <br>vero accusantium,
        <br>modi repellendus?
        <br>Enim nisi iusto.</button>
    </body>

Answer 9

Answer №5

Appreciation for the assistance provided. The insights shared here helped me broaden my perspective and successfully tackle this issue.

This is how I resolved it: Since I am utilizing react, I implemented a useEffect to add an additional property to my array:

useEffect(() => {
  const heights = itemRefs.current.map((itemRef) => itemRef.offsetHeight);
  setListOfHeights(heights);
  console.log(heights);
}, []);

useEffect(() => {
 if (listOfHeights) {
  let shallowCopy = [...ingredients];
  shallowCopy = shallowCopy.map((item, index) => {
    return {
      ...item,
      height: listOfHeights[index]
    };
  });
  setListOfIngredients(shallowCopy);
 }
}, [listOfHeights]);

I then incorporated a reference and a height condition within my loop:

  <div className="ingredientsWrapper">
    {listOfIngredients.map((item, index) => (
      <div
      key={`item_${index}`}
        ref={(el) => (itemRefs.current[index] = el)}
        className={`ingredient ${item.height > 36 ? 'bigger' : ''}`}
        onClick={() => handleClick(index)}
      >
        {item.label}
      </div>
    ))}
  </div>

Where 36 corresponds to my minimum height (indicating no line breaks)

View my solution in CodeSandbox

Answer 10

Appreciation for the assistance provided. The insights shared here helped me broaden my perspective and successfully tackle this issue.

This is how I resolved it: Since I am utilizing react, I implemented a useEffect to add an additional property to my array:

useEffect(() => {
  const heights = itemRefs.current.map((itemRef) => itemRef.offsetHeight);
  setListOfHeights(heights);
  console.log(heights);
}, []);

useEffect(() => {
 if (listOfHeights) {
  let shallowCopy = [...ingredients];
  shallowCopy = shallowCopy.map((item, index) => {
    return {
      ...item,
      height: listOfHeights[index]
    };
  });
  setListOfIngredients(shallowCopy);
 }
}, [listOfHeights]);

I then incorporated a reference and a height condition within my loop:

  <div className="ingredientsWrapper">
    {listOfIngredients.map((item, index) => (
      <div
      key={`item_${index}`}
        ref={(el) => (itemRefs.current[index] = el)}
        className={`ingredient ${item.height > 36 ? 'bigger' : ''}`}
        onClick={() => handleClick(index)}
      >
        {item.label}
      </div>
    ))}
  </div>

Where 36 corresponds to my minimum height (indicating no line breaks)

View my solution in CodeSandbox

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Updating the Scale of the Cursor Circle on my Portfolio Site

Understanding the React Login Flow with Google and Facebook Integration

Display the JSON data by pressing Enter key instead of clicking on the submit button

Is there a way to display JSON data in a dropdown list using a Functional component?

NPM - Include in package.json without installation

Compiling Nextjs with Tailwind typically takes anywhere from 8 to 16 seconds

Connect with Friends - Using Express, MongoDB, and EJS for a Seamless Friend Connection

Triggering an action with a click event on a

How can the dot badge in Material-UI be enlarged?

Twice the fetch is triggered

In Vue.js, when attempting to arrange an array of objects in descending order based on a specific key (such as "name"), the intention is to prioritize data containing uppercase letters to be displayed

Headers are being removed by Express or React

Is feature recognition possible in a jQuery plugin?

What is the reason for the error that is being caused by using arrow functions in my code

"Double the fun with fullcalendar.io - where every event is doubled

Is there a way to dynamically display an icon based on its snake_case name in a React material-ui environment?

How can you verify the presence of an object containing specific data within an array using JavaScript?

Setting up the initial state of a component by retrieving the state value from another component

Tips for modifying the background color of an individual page in Ionic 3 and above

Select items from object based on a specified array of IDs