javascript - React - Shorten string based on width - Stack Overflow

admin管理员组

文章数量:1344297

I have a container with the width: 500px. In this container there are 2 strings, "iiiiiiiiiiiiiii" and "MMMMMMMMMMMMMMM". You can clearly see that the "M" string is a lot wider than the "i" string, but both fit in the 500px screen.

If i make the container smaller, lets say 350px the M string is too wide and i want to remove some 'M's so it can fit as so:

In React i have the following data:

var i = 'iiiiiiiiiiiiiii';
var M = 'MMMMMMMMMMMMMMM';
var containerWidth = 500;

Based on what information do I shorten the strings?

I started out with if string.length > containerWidth / 10, but thats not right because string-length != width. I can't use getElementById and then use .offsetWidth

I have a container with the width: 500px. In this container there are 2 strings, "iiiiiiiiiiiiiii" and "MMMMMMMMMMMMMMM". You can clearly see that the "M" string is a lot wider than the "i" string, but both fit in the 500px screen.

If i make the container smaller, lets say 350px the M string is too wide and i want to remove some 'M's so it can fit as so:

In React i have the following data:

var i = 'iiiiiiiiiiiiiii';
var M = 'MMMMMMMMMMMMMMM';
var containerWidth = 500;

Based on what information do I shorten the strings?

I started out with if string.length > containerWidth / 10, but thats not right because string-length != width. I can't use getElementById and then use .offsetWidth

• javascript
• css
• reactjs

Share Improve this question Follow edited Aug 26, 2021 at 7:34 Hinrich 14k88 gold badges4848 silver badges6767 bronze badges asked Jun 19, 2018 at 9:36 JelleJelle 80822 gold badges1515 silver badges3636 bronze badges 1

• 2 For me, you can achieve your goal, without using js – Kamil Naja Commented Jun 19, 2018 at 9:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You can do that with css only:

.container {
  width: 350px;
  border: 2px solid black;
  padding: 20px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII<br>
  MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
</div>

Will result in something like this. Run the snippet for a live demo.

---------------------
| IIIIIIIIIIIIIIIIII|
| MMMMMMMMMMMMMMM...|
---------------------

本文标签： javascriptReactShorten string based on widthStack Overflow