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

What could be the reason for my Express server returning a 404 error for all files other than index.html?

Controlling the window opener; Inserting text into an element in the parent window

Tips for organizing a grid to achieve the desired layout

Only implement the CSS styles if there are multiple elements that have the same class

Creating custom events in a JavaScript constructor function

Creating a webpage that dynamically loads both content and video using HTML and Javascript

What is the best way to display a webpage within an iOS app using PhoneGap?

Configuring Stylelint in a NextJS project using Emotionjs

What method can I use to ensure that the sidebar stays fixed at a particular div as the user continues to scroll down the

I am looking to utilize the data from a POST request to dynamically update the DOM through a script.js file. How can

Can you help me make a JavaScript Random Number Generator that utilizes HTML input fields and buttons?

Can you tell if there are any distinctions between the two code snippets?

Examine the syntax of JavaScript

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

React - updates to server values do not display in DOM right away

At what point does Math.random() begin to cycle through its values?

Why does React component still use old state when re-rendering?

show button after the page has finished loading

Why is the Javascript code outputting undefined and NaN during execution?

A dynamic modal window built with ReactJS