-2

so my text isn't fitting onto mobile devices so I need to have a text break however, I dont want the text break on my browser, I only want it to appear on mobile devices. Is there any way to do this?

Devexted
  • 11
  • 1
  • 5
  • 1
    You need to consider a different way of approaching this, having breaks only on mobile devices is not a very effective way of handling mobile devices. Consider using a container for the text and allowing the text to wrap within it. – Wobbles May 17 '16 at 17:30

3 Answers3

2

As was mentioned in the comments, there might be a better way to approach whatever situation you have, instead of what you are doing. You question is a bit too low on information to really know.

However, to answer your question directly, you can try hiding a <br /> tag at certain screen sizes using media queries

https://jsfiddle.net/ah7xgbp1/

<p>
  This is line 1
  <br /> This is line 2


@media only screen and (min-width: 768px){ // common tablet/mobile size
  br {
    display: none;
  }
}
Blake Mann
  • 5,228
  • 19
  • 34
0

The first step is to detect if it's a mobile device (taken from here)

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {// some code..}

Inside that if statement, put code that adds a br.

$('somewhere').append("<br>");
Community
  • 1
  • 1
Orisun
  • 19
  • 6
0

There are ways to give html pages specific css or even certain html elements depending on the viewers device. Me myself have never done before in pure html/css.

(I am pretty sure this is a html5 and CSS3 feature)

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript/ might be helpful.

Hiplobbe
  • 143
  • 6