so I am brand new to web development (and to anything that requires code) and I've encountered this issue when working on my blogger website. I imported the theme template and I'm currently trying to learn to work with it.
this is how it looks on desktop (this is fine)
And this is how it looks like on something like an IphoneX (I suppose I'd want the text to be placed below instead
I'm not exactly sure what part of the code I should copy in here so I'll just type in the url:
psycoachalpha.blogspot.com
If anyone can help me fix this, or if you need any more information to do so, let me know. Thanks!
You can use a flexbox approach with flex-wrap: wrap, so the overflowing item gets on a new line
if you are using bootstrap you can use the Grid system which will allow you to display the blog side by side on desktops and for the text to go below the image on mobile
<div className="row">
<div className="col-sm-4 col-lg-4">
<div className="skill-item">
<img className="sticky" src="https://via.placeholder.com/400x790/444444.jpg" title="single-img-five" alt="single-img-five" />
</div>
</div>
<div className="col-sm-8 col-lg-8">
<div className="skill-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
</div>
</div>
Related
I have a very specific problem, so:
I have a medium text in My MySQL database. for example (with breakline):
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
I would like to get this text now using the get HTTP method and on my site display, all Lorem Ipsum in bold.
Is something possible to get?
I use ReactJS with Redux + Redux-Saga
or Maybe IN databases, I can insert the medium text in html but how to display it on the frontend then?
Store html and use dangerouslySetInnerHTML to render it. You can have a deeper look into it reading this post.
const text = '<strong>Lorem ipsum</strong> dolor sit';
const App = ({html}) => (
<div dangerouslySetInnerHTML={{ __html: html }} />
)
ReactDOM.render(<App html={text} />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Hello and thanks for looking into my issue, I am currently working with an XML file that is being pulled to create a directory list. What I am trying to achieve here is to display an image next to the person's name but it seems like no matter how I link it the image it doesn't display on the browser.
I have tried to add the image as ,
<profile>
<lastname>Sample Last name</lastname>
<firstname>Sample First name</firstname>
<middlename></middlename>
<lastfirstname>First_Last</lastfirstname>
<indextitle><![CDATA[Dean]]></indextitle>
<photo>photo.jpg</photo>
<bio>
<![CDATA[<p>Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>]]>
</bio>
</profile>
Css of:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown</p>
Style will be different compare to text have just one line:
<p>Lorem Ipsum is simply dummy text</p>
Is it possible?
Thank you so much :)
Did you want the line inside the paragraph to have a different style if so you can just add a span with an id to the area you want with a different style.
#line{
font-weight: bold;
}
<p><span id="line">Lorem Ipsum is simply dummy text</span> of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown</p>
If you are looking to target a single vs multiline sentence in CSS, this is not possible.
If you want to restrict your <p> to just one line use white-space: nowrap;.
Short answer is no. The length of the actual text in a paragraph doesn't effect the style of it.
However if you assign the paragraph tags within classes or id's then you can set each individual class or id to unique styles within the css style sheet.
You would have to do this programmatically with JavaScript.
Find the paragraph elements, check the length of the content and then apply a style based on that.
Here's a jsfiddle to illustrate (with jQuery).
HTML
<p>A short line.</p>
<p>A longer line with more words in it.</p>
JS
$("document").ready(function() {
$("p").each(function() {
if($(this).text().length > 15) {
$(this).css("color", "red");
}
});
});
See this code :
html{position:relative;min-height:100%;}
and
<div style="width:100%;height:100%;overflow:auto;">
<div id="main" style="width:200px;max-height:100px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
In addition, Textarea scrollbar and resize grabber cannot hiding too.
How can I fix it using CSS?
in Chrome(MacOS). But Safari works well.
This code is example for quick understanding.
The contents are large enough to require scrollbar.
UPDATE : https://jsfiddle.net/xu3q4m4w/9/
I guess This problem is relates to LINK.
height set into 100% create scroll bar. Try to fix into max-height:100%. as well as width. you should set into width:100% or max-width:100% to get full width, not in pixel.
UPDATED:
<div style="width:100%;height:100%;overflow:auto;">
<div id="main" style="max-width:1500px;height:200px;">
</div>
</div>
jsfiddle
I figure out this problem. It Happen by only old chrome version (48.0.2564.97)
Now fix it. (48.0.2564.103 )
Thank you for answer.
use this fiddle overflow-x:hidden
<div style="width:100%;height:100%;overflow:auto;overflow-x:hidden;">
<div id="main" style="width:1500px;height:200px;">
</div>
</div>
Link
Is there a css property that can limit the number of characters to be displayed in a div.For example
<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
but I need to display only
<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
I am using wordpress site with testimonial feature. So if any customer adds a testimonial, I need to display only the first few words with the link. Please Help!! Thanks!!
You can play around with a overflow property (actually there are couple of them - overflow-x, overflow-y and overflow), also you have to set the width in absolute units (read pixels or em, but not in percentage) of your div.
For example (CSS):
div.main-text {overflow-x: hidden;width: 200px;}
/*This will hide everything, which goes outside of the 200px div*/
Also you can limit your text with simple PHP code:
if (!function_exists('chop_string')) {
function chop_string($str, $len) {
if (strlen($str) < $len)
return $str;
$str = substr($str,0,$len);
if ($spc_pos = strrpos($str," "))
$str = substr($str,0,$spc_pos);
return $str . "Read more...";
}
}
Place the above function in your Wordpress theme's functions.php file and use it like this:
<?php echo chop_string('Bla bla bla', 5); ?>
The above code will show only 5 characters from your string and Read more....
EDIT:
If you want to cut the title or the generated content which comes from Wordpress, then you have to edit your page.php file (also archive.php file), they are inside your template directory. Find the following code in those files: the_content() and the_title(), those 2 functions display actually all information from database.
So cut them like this:
<?php echo chop_string(the_title(), 5); ?> or
<?php echo chop_string(the_content(), 5); ?>
There are two ways you can achieve this :
1) CSS way
add the css property text-overflow:ellipsis
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2) Trick way (HTML)
add a textarea control inside the div and add **maxlength=50** or whatever you need , hide the border using the css border:none property.
You can use css ellipsis. Just use it on the text-overflow. It will truncate adapt to the width of you box.
http://davidwalsh.name/css-ellipsis
http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
.main-text {
width: 250px;
}
.main-text p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
One limitation is that you are restricted to use one row.
No, CSS is presentational, so not involved with the length of specific content. It can clip on presentational properties such as box size with the overflow and text-overflow properties, but not based on content. You can easily fix it on the server side though:
$text = strlen($text) > 250 ? substr($text, 0, 250).'…' : $text;
echo "<p>$text</p>";
This inserts an ellipsis after 250 characters if the text is longer than that.
With the help of CSS3 property "text-overflow" - you can set the box width, thus resulting with the exact width for ALL divs;
Text won't be cut in the middle of the word and it will add "..." at the end of the text, hinting it's a preview text;
HTML Code:
<div id="myDiv">Just some text - you won't see ME!</div>
CSS Code:
#myDiv {
background: red;
color: white;
font-size: 20px;
height: 50px;
overflow: hidden;
width: 256px;
white-space:nowrap;
text-overflow: ellipsis;
}
Tested under FF, Chrome, IE11
This is my solution demo: limit-printed-words.html
It works well with any nested level and even button content.
Source project: scriptbucket