Question 74372 in Reactjs Question posted in
The new location for the React Documentation can be found here.

CSS/JS – How to make sure the line will break to be able to change the style? – Reactjs

I am wondering if is there any way to know when a line will break, so I can use a different style.

Problem:
The design team want 3 buttons in a grid (3 columns) with a determined size.
When the content of the button breaks line they want I border-radius 13px while buttons that it’s content is fit in one line will have border-radius:30px.

Solution with a problem:
My first solution was changing the class depending on number of characters, but it is not 100% perfect as we can see on the following images.

(18 characters) should be border-radius:13px as it is breaking line

(19 characters) should be border=radius:30px as it is not breaking line

Question:
Is there any other way to do it?

Thank you

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    thank you for your help. Some of the ideas here made me open my mind and I solved this problem.

    Here is my solution: As I am using react I wrote a useEffetc to include one more 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]);

    So I included a ref and a height condition inside 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 is my smallest height (so I know it represents no line breaks)

    Here is a codeSandBox with my solution


  2. 0

    Hey my suggestion would be,

    You should hard code it that when will the line break, (eg : 20px/.5rem/ETC), and you can check how many letters can be there in that 20px/.5rem/ETC area. If the length is more than what should be there, you perform a line break with Javascript (CSS), and change the border radius with Javascript (CSS).

    There can be other solutions too. But Maybe it would work with some more work around.

    Login or Signup to reply.
  3. 0

    you need to use height of the div, like if the height is greater than 42px(height at which text will be in more than one line), then set border-radius to 20px else 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";
  }
});

//use any 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>

    height depends upon your font (font-size, line-height, font-family) and padding.

    Login or Signup to reply.
  4. 0

    You can user RegEx to determine whether there is any line breaks in the button text.Then can add styles accordingly.

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

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

    If you know the height of a single line button, you could theoretically obtain the computed height of the buttons after the page has fully loaded, compare it, and then change the class accordingly.

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

Back To Top
Search