CODEWITHSUNDEEP
phptextline
Martin Sereday
Martin Sereday

Reputation: 47

Line breaks don't work in PHP language files

I have a scrips creating catalogues. It is prepared for localisation and it works. But there are "Hints" by "hover" explaining details. I would need to add line breaks on some points in these "pseudo tooltips". In my case <br>, "r\n\", and other standard line breakers don't work. I have in en.php:

<?php
/* English language configuration */
/* Version 2019-12-12 15:26 */
$lang = array (
'catalogue-hint' = 'REQUIRED Blablabla',
'another-hint' = 'OPTIONAL Blablabla',
...
'another_variable' = 'Blablabla');
?>
And the lang string is called in index.php 

<div class="hint">
	<div class="tooltip">
		<span data-title="<?php echo $lang['catalogue-hint']; ?>">
			<img src="./css/images/hint.png" alt="Hint">
		</span>
	</div>				
</div>
<div class="label">
	<?php echo $lang['catalogue-name']; ?><span class="req"></span>
</div>

Using <br> results in:

REQUIRED <br> Blablabla

I want it:

REQUIRED
Blablabla

Upvotes: 1

Views: 83

Answers (1)

AterLux
AterLux

Reputation: 4654

It is not about php. It is about html and css

First. Just put a plain line break into the values:

$lang = array (
'catalogue-hint' = "REQUIRED\nBlablabla", // note the doublequotes!!!
// or
'another-hint' = 'OPTIONAL
Blablabla',

Next, you need to edit your css file (or style block, makes the tooltip) and add to the .tooltip .... :hover::after (or whatever how it is in your css) the attribute

    white-space: pre;

which will make the tooltip content to accept a preformatted text.

Also, I recommend escaping special symbols (quotes, < > etc) using e.g. htmlspecialchars:

        <span data-title="<?php echo htmlspecialchars($lang['catalogue-hint']);?>">

Complete working example (.php):

<html>
 <body>
  <style>
   .tooltip span {
    display: inline-block; 
    position: relative; 
   }
   .tooltip span:hover::after {
    content: attr(data-title); 
    position: absolute;
    left: 20%; top: 30%; 
    z-index: 1; 
    background: rgba(255,255,230,0.9);
    width: 120px;
    padding: 5px 10px;
    border: 1px solid #333; 
    white-space: pre; /* preformated text! */
   }
  </style>  
<?php
$lang = array (
 'catalogue-hint' => "REQUIRED\nBlablabla", // note the doublequotes!!!
);
?>
    <div class="tooltip">
        <span data-title="<?php echo htmlspecialchars($lang['catalogue-hint']);?>">
            <img src="./css/images/hint.png" alt="Hint">
        </span>
    </div>  
 </body>
</html>

Upvotes: 1

Related Questions