Is it possible to change the div's font-size depending on how many characters are in it? I have image album titles in small fixed width div's (100px). Sometimes the album names have too many characters that they force a new line. So I was wondering if it is possible to re-size the font to keep the title on one line?
Yes, by assigning a variable to a class:
In your css:
.longstring {
font-size: 10pt;
}
.shortstring {
font-size: 14pt;
}
In your view
<?php
$random_number = '42';
if(strlen($div_string)>$random_number){
$font_class = 'longstring';
}else{
$font_class = 'shortstring';
}?>
<div class="<?php echo $font_class; ?>">
<?php echo $div_string; ?>
</div>
There is not a css way to do it you can use javascript or text-overflow in css3
Related
I have 2 selectors that can be itemID-XX and articleID-YY like this:
.itemID-XX.articleID-YY
The XX and YY are numbers that are generated dynamically by this script:
<div class="itemID-<?php echo $item->id; ?> articleID-<?php echo $article_id; ?>">
How can I say in CSS if XX=YY then add my declarations, or through PHP if XX=YY then add a new class, or maybe jQuery?
Thank you.
The best is to add a new class if the numbers are the same.
Inside the routine that echoes the classes, add this:
<div class="itemID-<?php echo $item->id; ?> articleID-<?php
echo $article_id;
if ($item->id==$article_id)
echo " thesame";
?>">
and then you can simply use .thesame for a selector in CSS.
Update
Answer is No
as with plain css we cant compare two classes you need js for that
If you want to select static selectors only then below code will work for you
[class*='XX'][class*='YY']{
// code here
}
/* if you want to target both */
[class*='XX'][class*='YY'] {
color: red;
}
/*to target YY*/
[class*='YY']{
color: green;
}
/*to target XX*/
[class*='XX']{
color: blue;
}
<p class="itemID-XX articleID-YY">xx yy</p>
<p class="articleID-YY">yy</p>
<p class="itemID-XX">yy</p>
<p class="as-dsads-as">dsds</p>
CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }
I'm not sure if this is possible but I would like to add a border to each number in a div.
I know how to add a border to a div but I would like that each number in a div to have a border.
Example:
<div id="borders">12345</div>
The output should look like this:
(1) (2) (3) (4) (5)
Where "()" is the border.
PS: I don't want to use a separate div for each number because this number will be a php code, like this:
<div id="borders"><?php $number; ?></div>
Is it possible?
Not possible without adding extra markup:
Live example: http://codepen.io/anon/pen/gDHlA
Markup
<div id="borders">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
Css
span:before, span:after {
display: inline-block;
}
span:before {
content: "(";
}
span:after {
content: ")";
}
I've inserted parens, of course feel free to change them with a pipe (|) or use borders applied to span elements (in this case, give them also a display, a width and a height)
About your latest requirement, your code can easily adapted like so:
$number = 12345;
$span_number = "";
foreach (str_split($number) as $key => $digit) {
$span_number .= "<span>$digit</span>";
}
echo $span_number;
//output: <span>1</span><span>2</span>...<span>5</span>
I think it is impossible. You can wrap each number in a <span> and make border for spans
You can use span elements like this, but you have to build all tags according to the numbers, using php string functions to split each number. There is no way to do that without tags.
<div id="borders">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
Your CSS:
#borders span {
display:inline-block;
border:1px solid red;
padding:2px;
margin:2px;/*if you want space between numbers*/
}
I have text that I put into a div, which is generated automatically by php..(taken from the database).
But the text stretches over the div.
here is an example of what I want to do:
<div>
<?php
Generate_All_Text_Content_Here();
?>
</div>
I want the div to limit to where the text stretches..say no more than 300px.
I tried to give it width measurement..but it has no influence over the div element
add to your style
div{
max-width:300px;
word-wrap:break-word;
text-overflow:<clip> or <ellipsis>;
overflow:<hidden> or <scroll>;
}
this should really cover everything >.<
Why not do something like this then?
<div style="<?php echo get_text_width(); ?>">
<?php Generate_All_Text_Content_Here(); ?>
</div>
Just set the div width with CSS and text won't be bigger:
div {
max-width: 300px; /*Or simply width: 300px; if you want the div always to be that width*/
}
I'm using SASS/SCSS and want to create a #function/#mixin which will figure the max possible font-size for a container, given a dynamic width.
For example:
<body style="font-size: 10px;">
<div style="width: 960px;"> <!--This width is dynamic-->
<span style="font-size: 12.3em">Patrick Rocks</span>
</div>
</body>
The unknown variable in this equation is the font-size on the <span> tag. I set it to 12.3em which would be 123px (relative to the font-size of the <body> tag), but that could change depending on letter-spacing font-family or other aspects. Perhaps because of the complexity of this it would be best served to calculate this with JavaScript, or PHP.
You can't do this on the server side, as the user's font may have any dimensions. You'll have to do it in javascript, in the browser.
I've worked it through and found a solution which fits my needs. The solution only works if the following is known.
The exact text being used
The font being used
The default width based on the parent font-size
DEMO:
http://wecodesign.com/demos/stackoverflow-7420897.htm
SCSS:
$logoDefaultWidth: 76; /*Pixels*/
#function getFontSize($newLogoWidth) {
$fontSize: $newLogoWidth/$logoDefaultWidth;
#return #{$fontSize}em;
}
#function pxToEm($px) {
#return #{$px/10}em;
}
body {
font-size: 10px;
}
.logo {
width: pxToEm($logoDefaultWidth);
}
.logo.s960 {
font-size: getFontSize(960);
}
.logo.s480 {
font-size: getFontSize(480);
}
HTML:
<div class="logo s960">Patrick Rocks</div>
<div class="logo s480">Patrick Rocks</div>
TODO:
This solution has a known issue with WebKit (Chrome/Safari) browers. WebKit browsers render #font-face font's much thicker than they should, thus making the $logoDefaultWidth incorrect. I'm working on trying to find out how to stop WebKit from making the font so thick, or on a separate calculation for WebKit.