How can I contain the text to be within the width of my div and wrap to a new line in my css? Thank you!!
.render-message {
margin-top: 8px;
height: 90px;
margin-bottom: 8px;
}
.render-message {
margin-top: 8px;
height: 90px;
margin-bottom: 8px;
border: 1px solid red;
}
<div class="render-message">
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 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
</div>
Related
If the alert has fewer points, it has a solid color, as it grows it becomes transparent, how can I solve it?
code CSS
.div-error{
justify-content: center;
position: fixed;
left: 40%;
top: 20%;
}
.text-error{
color: red !important;
font-weight: bold;
}
Try the background-color property for a solid filled color.
Ex.
.text-error{
background-color: red !important;
font-weight: bold;
}
I share here a responsive development of an alert box, this is my own code, you can copy the css of this for your own alert. This
function openAlert(status, message) {
$("#AlertGeneralContent").html(message);
$("#AlertGeneral").removeClass();
$("#AlertGeneral").addClass(status+" show");
}
function closeAlert() {
$("#AlertGeneral").removeClass("show");
}
#AlertGeneral {
position: fixed;
height: fit-content;
width: 450px;
max-width: 90%;
bottom: 30px;
right: 10px;
max-height: 100px;
overflow-y: auto;
display: none;
padding: 20px;
background-color: black;
color: white;
z-index: 10000;
box-shadow: 0 3px 50px -2px rgba(0, 0, 0, 0.2) !important;
}
#AlertGeneral.show{ display: block !important; }
#AlertGeneral.Success{ background-color: #4CAF50; }
#AlertGeneral.Info{ background-color: #2196F3; }
#AlertGeneral.Warning{ background-color: #ff9800; }
#AlertGeneral.Danger{ background-color: #f44336; }
#AlertGeneralClose {
margin-top: -10px;
position: fixed;
right: 35px;
color: white;
font-weight: bold;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
#AlertGeneralClose:hover { color: black; }
<!DOCTYPE html>
<html lang="es">
<body>
<button style="background-color: green;" onclick="openAlert('Success','Great!')">Success</button>
<button style="background-color: yellow;" onclick="openAlert('Warning','Not like this!')">Warning</button>
<button style="background-color: red; color: white;" onclick="openAlert('Danger','Careful!')">Danger</button>
<button style="background-color: blue; color: white;" onclick="openAlert('Info','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 typesettingLorem 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 typesettingLorem 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 typesettingLorem 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 typesettingLorem 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 typesettingLorem 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')">Long Text</button>
<div id="AlertGeneral">
<span id="AlertGeneralClose" onclick="closeAlert()">×</span>
<div id="AlertGeneralContent"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I have a text and when I press on icon I can read more, and when press on another icon I can read less. The question is that how can make indent of top, for read more and read less icons to see them below than text, and make them(icons) in the center? The icons are +, -.
This is html:
<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.
<input id="read-more-state-1" class="read-more-state" type="checkbox">
<span class="read-more-target">
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.
</span>
<label for="read-more-state-1" class="read-more-button">
<span class="read-more-button-icon"></span>
</label>
</p>
This is CSS:
.read-more-state {
display: none;
}
.read-more-button {
display: none;
}
#media only screen and (max-width: 600px) {
.read-more-target {
opacity: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-button {
display: inline-block;
border-radius: 0.25em;
width: 1em;
height: 1em;
background: url(img/arrow%20grad.svg);
background-size: cover;
cursor: pointer;
}
.read-more-state:checked + .read-more-target {
opacity: 1;
font-size: inherit;
}
.read-more-state:checked ~ .read-more-button {
background: url(img/arrow%20up%20grad.svg);
background-size: cover;
cursor: pointer;
}
}
If you want the + and - icons to appear centered and below the text, your easiest option would be to make the p element positioned relative, and your icons positioned absolute.
p{
position: relative;
padding-bottom: 1.5em;
}
.read-more-button {
position: absolute;
bottom: 0px;
left: 50%;
}
Here is a codepen link.
This question already has answers here:
Applying an ellipsis to multiline text [duplicate]
(23 answers)
Closed 4 years ago.
Guys, I want ellipsis and read more tag after fourth or third line when user click on read more than more content show for this with CSS.
what I want is like this:
<div class="mycontent">
<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 this is aweome</p>
</div>
I want to show first two few words only then after I want to read more tag where user click and pending content show. like this follow:-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy... read more
now after click read more all content show like this:-
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 this is awesome
You need to truncate text after two lines. There could be two ways to do it pure css.
Only for Chrome
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
For all browsers
p {
overflow: hidden;
position: relative;
line-height: 1rem;
max-height: 2rem;
text-align: justify;
margin-right: -1rem;
padding-right: 1rem;
}
/* create the ... */
p:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
p:after {
content: '';
position: absolute;
right: 0;
width: 1rem;
height: 1rem;
margin-top: 0.2rem;
background: white;
}
additionally, you could use js to do it.
my html code is like this..
<div class="content">
<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 </p>
</div>
and the web.css should be like this
.content {
overflow: hidden;
text-overflow: ellipsis;
line-height: 18px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
display: -moz-box;
color: 8b8989;
font-size: 13px;
}
-webkit-line-clamp specifies from which line the elipsis need to be applied
I wish to have equal height columns, so I have created a display:table container with display:table-cell children, both have height:100% set. The problem is, it works as I wished on Firefox only, but doesn't work on Chrome and IE11.
Here's the fiddle
Below is the HTML code :
<div class="featured">
<div class="row">
<div class="one-half">
<div class="light-bg">
<div class="row">
<div class="one-quarter"><div class="icon icon-server icon-1"></div></div>
<div class="three-quarter">
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 le 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 le
</div>
</div>
</div>
</div>
<div class="one-half">
<div class="light-bg">
<div class="row">
<div class="one-quarter"><div class="icon icon-server icon-2"></div></div>
<div class="three-quarter">
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 le
</div>
</div>
</div>
</div>
</div>
</div>
Here's the CSS :
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
}
.row{
margin-bottom:20px;
margin-left:-10px;
margin-right:-10px;
}
.row:before,
.row:after{
content: "";
display: table;
}
.row:after{
clear:both;
}
.one-half, .one-quarter, .three-quarter{
float:left;
padding:0 10px;
box-sizing:border-box;
}
.one-half{
width:50%;
}
.one-quarter{
width:25%;
}
.three-quarter{
width:75%;
}
.light-bg{
background:#ddd;
}
.featured > .row{
display:table;
height:100%;
}
.featured > .row .one-half{
display:table-cell;
height:100%;
float:none;
vertical-align:top;
}
.featured > .row .light-bg{
padding:20px;
border-radius:4px;
height:100%;
}
.featured > .row .light-bg .row{
margin-bottom:0;
}
.featured > .row .light-bg h6{
margin:0 0 10px 0;
color:#000;
}
.featured > .row .light-bg .icon{
text-align:center;
width:100%;
height:96px;
background:#fff;
}
Any ideas is greatly appreciated. I can't use flexbox because it's not supported in IE9.
Thank you.
Since all browsers could detect the height of .one-half correctly (except Chrome), finally I used JavaScript to set its height explicitly to solve this problem for IE (and any other browsers) because the children elements use height:100%, and one of the children with this is the element with background colour.
As for Chrome, I had to apply display:table; to .light-bg to allow correct detection of height for .one-half parent.
Make it flexible for any browsers
visit this learning site
http://www.w3schools.com/cssref/css3_browsersupport.asp
Im trying to create a side left menu for mobile but I have an issue :
When I scroll my content, my header image follows the scroll and hides some content. I need my header to be fixed in it's place...
Here is a demonstration of my problem: http://jsfiddle.net/th46k/7/
My Html:
<header id="top">
<span id="logo"><img src="http://placehold.it/350x150" /></span>
</header>
<div id="menu">
<ul>
<li>Menu Item 1
</li>
<li>Menu Item 2
</li>
<li>Menu Item 3
</li>
</ul>
</div>
<div id="right">
<div id="menubar">
<div id="button">Menu</div>
</div>
<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>
<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>
<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>
And this is my CSS:
* {
padding: 0px;
margin: 0px;
}
#top {
width:226px;
margin:10px auto 10px auto;
}
#logo {
float:left;
}
#menubar {
width:100%;
background-color:#444;
color: #fff;
padding: 10px;
}
#button {
cursor:pointer;
}
#menu, #right {
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
overflow: scroll;
left: 0px;
height: 100%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:#444;
border-bottom: 1px solid #888;
}
Here is an example related to your requirement. When you scroll the page the header area will stick to the top. Do some changes as per your requirement. Hope it will help you.
Demo