Trim word accorddingly to screen width

Question

I have got a space on my navbar that brings an title. What I would like to do is: On a desktop screen it shows: "Title is too long for a mobile screen" On a mobile screen: "Title is too long..."

I have already done that detecting if it is a mobile screen and using str_limit("Title is too long for a mobile screen", 17) to trim the sentence.

But my problem is: There's plenty of different sizes of mobile phones and I would like to do it fitting the screen width and that includes if the user turns the screen to paisage. Anybody have an idea?

Possible duplicate of [How to restrict character limit by line or # of characters with css?](http://stackoverflow.com/questions/13817597/how-to-restrict-character-limit-by-line-or-of-characters-with-css) — mister martin, Aug 05 '16 at 13:55
If you don't use a CSS solution, the only other way to do this is to use AJAX to send back the width of the screen to your server, and you indicate PHP so you would use the GD library to find the bounding box of your text and adjust accordingly. Then send back the length you found and crop accordingly. Much more complex way to do it. If you are happy with CSS - do it that way. :-) — Mark Manning, Aug 05 '16 at 14:03
Ah! I also just looked up how to do this using Raphael. So you may want to take a look at this: http://stackoverflow.com/questions/14838081/getting-the-size-of-text-without-using-the-boundingbox-function-in-raphael-javas (Edit) Actually HTML5 -or- Raphael. Both answers are given. — Mark Manning, Aug 05 '16 at 14:05

score 4 · Accepted Answer · answered Aug 05 '16 at 13:55

4

You can achieve this with CSS alone by setting the overflow property to hidden, the text-overflow property to ellipsis and the white-space property to nowrap. This way, the text within the element will be trimmed when it's too small to fit the space available to it, without having to "sniff" for the screen size.

h1{
  background:#000;
  color:#fff;
  font-family:sans-serif;
  overflow:hidden;
  padding:5px;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:50%;
}

<h1>This title might be too long to fit your screen</h1>

answered Aug 05 '16 at 13:55

Shaggy

6,696
2
25
45

can we control to length of text? – jonju Aug 05 '16 at 14:01
@jonju, can you clarify what you're asking, please, because this answer does exactly that; controls the lenghth of the text. – Shaggy Aug 06 '16 at 20:54
Eg: you answer is showing `This title might be to..` can we make it to show `This title might be too long` or whatever we want.. – jonju Aug 06 '16 at 20:57

score 1 · Answer 2 · answered Aug 05 '16 at 13:54

1

i would prefer a css solution, because you have do a lot of calculations to get the length of the text in pixels ...

<span style="text-overflow: ellipsis">Title is too long for a mobile screen</span>

Example here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow_hover

HTH

answered Aug 05 '16 at 13:54

Oliver

224
1
7

Will this print "Title is too long" just like the OP wanted? – jonju Aug 05 '16 at 14:02
This shortens the text to the available space and extends it with "..." – Oliver Aug 08 '16 at 06:37

score 0 · Answer 3 · answered Aug 05 '16 at 13:55

0

Try applying this piece of CSS code to the element:

text-overflow: ellipsis;

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

answered Aug 05 '16 at 13:55

Mart Oosterveld

152
1
4

score 0 · Answer 4 · answered Aug 05 '16 at 14:04

0

You can print whatever you want with this approach

.title:before{
  content:"Title is too long for a mobile screen";
}
@media(max-width:480px){
  .title:before{
    content:"Title is too long...";
  }
}

<h1 class="title"></h1>

answered Aug 05 '16 at 14:04

jonju

2,711
1
13
19

Trim word accorddingly to screen width

4 Answers4