0

I am getting my strings out of a constants file, which will be translated into multiple languages. If I have the following string of two sentences:

Here is the first sentence in my example. Here is the second sentence in my example.

And I want to have the following displayed on my page:

Here is the first sentence in my example.
Here is the second sentence in my example.

I am using Angular 2 and the constants file I'm using displays any HTML in the string. I realize that I could simply create two separate strings to accomplish this but I wonder if there is a way to do it using CSS and HTML. I would prefer to avoid sanitizing the strings.

Is there any way to accomplish this with CSS and/or HTML?

Chris Sharp
  • 2,005
  • 1
  • 18
  • 32
  • 1
    http://stackoverflow.com/questions/2703601/how-to-give-line-break-from-css-without-using-br – Robert Mar 08 '17 at 01:41
  • Have you tried `\n` in the string after all the text? Example: `var simpleString = "Hi\nHi";` –  Mar 08 '17 at 01:46
  • The \n doesn't show but it also doesn't break the text. – Chris Sharp Mar 08 '17 at 01:50
  • 1
    With no modification to your string-of-two-sentences neither the HTML nor the CSS would know where or how to break. You either have to mark them (by changing your constants file) or _parse_ the string constant and decide where to break. Even adding a `\n` in there will require you to replace that with a `
    `, because a newline is just whitespace (like a space or tab) as far as HTML is concerned.     – Stephen P Mar 08 '17 at 01:51
  • I would have hoped there would be something like break-word that worked for periods. It would be a useful thing to have, at least right now :) – Chris Sharp Mar 08 '17 at 01:56
  • _"Mr. and Mrs. Smith went to the opera last Tuesday. They drove to Pine St. in St. George"_ <— where do you break these two sentences? You can't just break on a period. It's easy for a human, it's very difficult for a computer. – Stephen P Mar 08 '17 at 17:37
  • Since constants are controlled by a programmer then the limitation is in CSS. It could easily be written so that it breaks on periods encased in something or whatever. I don't buy that it doesn't exist because it's difficult. It doesn't exist because it's probably easier just to write two strings. – Chris Sharp Mar 08 '17 at 18:26
  • I'm not saying it doesn't exist, I'm saying parsing such a thing is difficult. Since CSS & HTML are language-neutral they would also have to get it right for every dialect of every language in the world. I agree that since these are controlled by the programmer it's easier to just have two strings, or allow embedding of `\n` which is easier to parse for. – Stephen P Mar 08 '17 at 19:22
  • I went with the link provided by @RobertRocha. Thanks! It's a neat trick. – Chris Sharp Mar 08 '17 at 21:05
  • @chrissharp no problem – Robert Mar 08 '17 at 21:57

1 Answers1

0

HTML equivalent for line break is: 

&lt;br /&gt;

If the slash causes issues, you can always remove it.

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • I know. That's why I stated in the question that any HTML in the string gets displayed. – Chris Sharp Mar 08 '17 at 01:39
  • i found a link in stack with a similar issue someone had. not sure if that is what you are looking for: http://stackoverflow.com/questions/34504203/how-to-allow-html-in-return-of-angular2-pipe – Syfer Mar 08 '17 at 01:48
  • That didn't work either. I even tried using it with a line break and it still wouldn't break it. – Chris Sharp Mar 08 '17 at 01:53
  • If you put both sentences in a span each encased in a div, you can use CSS `display:inline-block;` to create the line break if you give the div a class. – Syfer Mar 17 '17 at 08:14