0

hello i am trying to make span that allows me to trim too long words in the middle:

like this

but the problem is if the word is long the letters are being cut in the middle:

example

and if the word is short it appears twice:

example2

css:

#attachmentfile span {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

#attachmentfile span:first-child {
    width: 50%;
    text-overflow: ellipsis;
}

#attachmentfile span + span {
    width: 50%;
    direction: rtl;
    text-align: right;
}

html:

<span>
    {{Att}}
</span>
<span>
    {{Att}}
</span>

sample: http://jsfiddle.net/c8everqm/1/

  • The question asked maybe a duplicate of **https://stackoverflow.com/questions/4250364/how-to-trim-a-file-extension-from-a-string-in-javascript** – shark Apr 13 '21 at 10:20
  • i searched for it but i couldnt find answer this one doesnt help but thanks. –  Apr 13 '21 at 10:23
  • 1
    i added sample @RoryMcCrossan –  Apr 13 '21 at 10:29
  • 1
    It's only polite to include the source of your code / attribution: https://stackoverflow.com/a/27746353/2181514 – freedomn-m Apr 13 '21 at 10:36
  • There's a number of possible solutions already in SO, eg: https://stackoverflow.com/a/36470401/2181514 what made you pick this solution (in the question) to try to "fix"? – freedomn-m Apr 13 '21 at 10:38
  • 2
    If you don't mind `... ...` you could add `text-overflow: ellipsis;` to the second span http://jsfiddle.net/d51q8zso/ to fix letters cut in half - and then probably set both to 50% - still won't fix other issues caused by having 2 spans - essentially, a 2 span solution doesn't work. – freedomn-m Apr 13 '21 at 10:45

2 Answers2

1

Css:

#fileName span {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

#fileName span:first-child {
  width: 100px;
  text-overflow: ellipsis;
}

#fileName span + span {
  width: 1px;
  direction: rtl;
  text-align: right;
  text-overflow: ellipsis;
}

HTML:

<div id="fileName"><span>This is the big name of my file.txt</span><span>This is the big name of my file.txt</span>
</div>

Thanks to freedomn-m this is as far as I got to the solution.

http://jsfiddle.net/ygqz3b5k/1/

shark
  • 27
  • 6
  • @Fanso98 instead of `width:1px` you could use `width:0px` it will be helpful for you to get your output. – shark Apr 13 '21 at 11:03
0

I propose the following solution:

CSS:

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

HTML:

<div class="cut-text">
    This text is a bit long, so 3 dots will appear.
</div>


.cut-text { 
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 170px;  
  white-space: nowrap;
}
<div class="cut-text">
This text is a bit long so 3 dots will appear.
</div>
sersang5
  • 1