I have the following codes
<div class="row-fluid">
<div class="span6"><img src = "<?php echo $photo ?>"/><?php echo $row['comment'];?></div>
<div class="span6"></div>
</div>
which produces this: http://d.pr/i/g4y7
Why would the text "thissssssss..sss" overlap the other span while the text "this this this" with spaces display just fine?
The expected result is the first part of the text. The problem is the second one.
Because the browser does not know how to wrap this long word.
You have to declare:
<element> { word-wrap: break-word }
to avoid this.
Related
I hope you are good.
I'm having trouble to customise my label with amcharts.
I'm trying to put on a map, the date and the place of an event as a label like that:
https://codepen.io/acivita/pen/BarvPzZ
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>
When I exported this code on amcharts, it works well but it's too big:
https://codepen.io/acivita/pen/KKobeXm
var label = labelSeries.mapImages.create();
label.latitude = element.latitude;
label.date = tmpData[0].eventInfo.date;
label.city = tmpData[0].eventInfo.specific;
label.longitude = element.longitude;
label.interactionsEnabled = false;
label.children.getIndex(0).html = `
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>`
Example :
I added a red background to see why it wasn't aligned with the dot.
https://codepen.io/acivita/pen/vYRmzgO
So when I try to reduce it, there are some issues:
the text is not vertically aligned anymore.
it seems to have some margin .
It looks like if I put too small properties for my text the behaviour get weird.
It may be a css/html error because I'm not very good at positioning stuff.
Thanks for the help and have a nice day.
.multiplecolonnes {
width:250px;
-moz-column-width:300px;
-webkit-column-width:300px;
column-width:300px;
height:45em;
}
.multiplecolonnes {
padding:-1000;
counter-reset:lis;
}
.multiplecolonnes {
counter-increment:lis;
content:' ' counter(lis);
}
<div class="panel-body panel-body-non-repetitive">
<div id="previewHtml" class="multiplecolonnes" style="font-size: <?php echo ($taille_police);?>;">
<?php echo (html_entity_decode($str));?>
</div>
</div>
https://jsfiddle.net/kn05cy1p/
I have this code that allows me to display my text on several columns
The height of which is predefined. However, when there are more than 3 three columns, I would like to go back to the line. Because currently here is the result
Multiple Columns
I've tried a lot of things but I can't make a line break. How can I do that?
Thank you for your help.
I am extremely tired = extremely stupid but I want to get on with this first thing in the morning...
<div class=' form-group smhTextArea removeForAjax' style='margin-bottom: 10px'>
<div class=''>
<textarea class='form-control message-text-area' rows='4'
name='message<?= $jj ?>' placeholder='New text box <?= $jj ?>'
id='message<?= $jj ?>' >
ID <?= $jj ?> "\n" <br> Msg:<?= $stackContent ?><br>
</textarea>
</div>
</div>
Output comes out as:
ID 1 "\n" <br> Msg:4 Mary had a little lamb it's... ??? # "<br>
I have looked at lots of answers on here and searched Google but can see nothing.
If this should work it is possibly that this is a very ill-formed test page at the moment.
Once again sorry if dumb but passing out here!
The <textarea> element does not render HTML, it actually renders plain text, as its formatted in HTML file. So that means you don't have to use <br /> tag to start a new line, instead just use the regular line break (press return key on keyboard).
<textarea>Line 1
Line 2
Line 4
</textarea>
You need to use a CR/LF
instead of a <BR>
<textarea> ID 1 "\n"
Msg:4 Mary had a little lamb it's... ??? # "</textarea>
I think my question is the simplest question on this site. Nevertheless i couldn't solve it.
Now, i have a html like bottom. Elements have to be shown side by side. However output is like in picture below. Also, I did not get where the underscore come up from.
How can i do what i want?
<div class="ilgiliclass">
<?php
echo '<ul>';
if(...)
{
foreach(...)
{
if(...)
{
?>
<li>
<img src="img/arrow.gif">
<div class="si">
...
</div>
-
<div class="so">
...
</div>
<br />
</li>
<?php
}
}
}
?>
</ul>
You have a dash in your markup between the si and so elements. I imagine that's the 'underscore' you are talking about. Both .si and .so could be set to display:inline;, which should put everything on one line.
JS Fiddle Example: http://jsfiddle.net/TYsN6/
I have the following html.
<div>this is line 1 {start-hidden}</div>
<div>this is line 2</div>
<div>{end-hidden} this is line 3</div>
I want the text between {start-hidden} and {end-hidden} to be not visible. How can I achieve this? Note that the "start-hidden" and "end-hidden" COULD be in different places. It some extra markup.
Do I need some fancy regex or would it be better to use server side DOM manipulation?
Thanks.
The solution I went with (with PHP) (for those interested):
Regex to extract all text (+html) inside the {start-hidden} and {end-hidden} [call this part $inner] as well as all the text before [$pre] and after [$post] it.
preg_match('#^(.*?){start-hidden}(.*?){end-hidden}(.*?)$#is', $source, $matches)
Then remove any cause of new lines within the $inner. Only remove those with closing tags too.
// attempt to remove all sources of new lines
$inner = preg_replace('#<br([^>])*>#is', '', $inner);
$inner = preg_replace('#<div([^>])*>(.*?)</div>#is', '', $inner);
$inner = preg_replace('#<p([^>])*>(.*?)</p>#is', '', $inner);
Then we find every leftover tag and prefix with </span> and append <span class="hidden">.
$inner = preg_replace('#(<[^>]+>)#is', '</span>${1}<span class="hidden">', $inner),
Then prefix $inner with <span class="hidden"> and append </span>
$inner = '<span class="hidden">' . $inner . '</span>';
Finally join it all back together (and repeat if you can preg_match() again).
$source = $pre;
$source .= $inner;
$source .= $post;
Do {start-hidden} and {end-hidden} have to be within the and tags as they are?
Adhering to html would suggest using something like (it makes no sense to have styles "break" the div as your suggestion does):
<div>this is line 1</div>
<div style="display:none;">this is line 2</div>
<div>this is line 3</div>
or, as was suggested by gred:
<div>this is line 1</div>
<div style="visibility:hidden;">this is line 2</div>
<div>this is line 3</div>
edit: It's important to have a look at the difference between display:none and visibility:hidden:w3schools on display vs. visibility
Use a span:
<div>this is line 1 <span style="visibility:hidden;">{start-hidden}</span></div>
<div>this is line 2</div>
<div><span style="visibility:hidden;">{end-hidden}</span> this is line 3</div>