Shorten the word to fit the width of the screen

Question

I have a place on my navigator that brings the name. What I would like to do is: On the desktop screen it shows: "The title is too long for the mobile screen" On the mobile screen: "The title is too long ..."

I already did this by finding it to be a mobile screen and using str_limit("Title is too long for a mobile screen", 17)it to crop the sentence.

But my problem is that there are many different sizes of mobile phones, and I would like to do this taking into account the width of the screen, and this includes if the user switches the screen to paisage. Does anyone have an idea?

Answer 1

This can only be done using CSS by setting the overflowvalue of the hiddenproperty, property text-overflowto value, ellipsisand property white-spaceequal nowrap. Thus, the text inside the element will be cut off when it is too small to fit the space available to it, without the need to “sniff” 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>

Run code

Answer 2

I would prefer a css solution, because you have 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

NTN

Answer 3

CSS :

text-overflow: ellipsis;

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

Answer 4

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>

Run code