Text overflowing beyond the DIV while scrolling
How can prevent the text from exceeding the DIV box while scrolling?
What are the changes that I need to change?
.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
background-color: #111;
width: 100%;
}
<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align">
<div class="trending-content">
Some random text
</div>
</div>
</div>
</div>
.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
background-color: #111;
width: 200px;
height: 100px;
overflow: scroll;
}
<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align" >
<div class="trending-content" >
Some random text Some random text Some random text Some random text Some random text Some random text Some random text Some random text
</div>
</div>
</div>
you can use CSS overflow Property
overflow: scroll;
try this - http://jsfiddle.net/MadhawaMB/rJy94/41/
.trending-content {
background-color: #111;
width: 200px;
height: 100px;
overflow: scroll;
}
I don't get what you mean by scroll
But possibly you mean to extra wrap the text inside the div
, here the solution for that
just include
word-wrap: break-word;
.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
word-wrap: break-word; //here
background-color: #111;
width: 100%;
}
<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align">
<div class="trending-content">
Some random textdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</div>
</div>
Related
I'm coding 3 boxes. There is pic and title at first column, then there is paragraph and at the bottom there is a link. So the boxes are not editable, just the content is. They should look the same no matter how long the title is. But the length of title changes size of pictures.
When the title needed more than one line, the pic shrank. So I added to my code a min-width. Now the ones previosly problematic are OK, but the third are wider than before, than the two other. Now the css code for pic looks like this. It is an icon with border (as you can see):
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
What should I add/change to make all 3 pics looks the same?
Structure:
<div class="box box--product">
<div class="box__content">
<div class="box__title d-flex">
<div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
<div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
<h3 class="box__hdl">'.$atts['nadpis'].'</h3>
</div>
<div class="box__excerpt match-height">
<p>'.$content.'</p>
</div>
<div class="box__more">
<hr>
Viac informácií
</div>
</div>
</div>
Sass:
.box {
$this: &;
background: $gray-lighter;
border-bottom: 7px solid $primary-green;
color: $black;
cursor: pointer;
//margin-bottom: $grid-gutter-width;
&--not-hover {
cursor: default;
}
&__title {
align-items: center;
&--subprod {
margin-bottom: 16px;
//min-height: 75px;
}
}
&__more {
text-align: center;
}
&__icon {
background: {
position: center;
repeat: no-repeat;
size: auto 44px;
}
border: 1px solid $gray-dark;
border-radius: 5px;
height: 80px;
margin-bottom: 16px;
margin-right: 10px;
width: 80px;
&--big {
background-size: 65px auto;
border-width: 2px;
height: 112px;
margin-bottom: 40px;
margin-top: 20px;
width: 112px;
}
&--hover {
border-color: $white;
display: none;
}
}
&__excerpt {
font-size: 14px;
letter-spacing: .44px;
line-height: 21px;
margin-top: 10px;
}
&--product {
border-bottom-width: 7px;
#{$this}__hdl {
color: $primary-green;
font-size: 16px;
line-height: 20px;
margin-left: 10px;
text-transform: uppercase;
}
#{$this}__content {
padding: 15px 22px 5px;
}
#{$this}__icon {
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
&--hover {
border-color: $white;
}
}
#{$this}__excerpt {
// border-bottom: 1px solid $primary-green;
color: $gray-dark;
margin-bottom: 15px;
}
#{$this}__more {
.link-warning,
.link-more {
letter-spacing: .4px;
margin-bottom: 10px;
}
}
&:hover,
&:focus {
#{$this}__hdl {
color: $white;
}
#{$this}__excerpt {
border-bottom-color: $white;
}
#{$this}__more {
.link-warning {
&::before {
background-image: url('../images/icon-warning--white.svg');
}
}
}
}
}
Something like this ?
.card {
width: 200px;
height: 300px;
display: inline-block;
margin: 12px;
border: 1px solid black;
overflow: hidden;
display: flex;
flex-flow: column;
}
.card .title {
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .link {
color: blue;
text-decoration: underline;
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .image {
flex: 1 1 auto;
overflow: hidden;
}
.card .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="card">
<div class="title">Some title</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="link">Some link</div>
</div>
<div class="card">
<div class="title">Some title that is way too long to fit in 200px</div>
<div class="image">
<img src="https://picsum.photos/1024/768">
</div>
<div class="link">Some link that is also way too long for this little box</div>
</div>
Well, it is not probably best practise. But I just add
max-width: 57px; (+1px)
and it works just fine.
Trying to have all flex boxes inside my flex containers scale equally.
If you try and reduce the viewport, the center flexbox will start to resize, but the outer ones do not. So you end up with a situation where you have a tiny image in the center with massive images on the sides.
I've only just started learning CSS, so I'm not entirely sure what I am doing so I appreciate any help.
Here are a few extra images that help illustrate the issue:
Before reducing viewport:
After:
So ideally I want the images on the outside to scale down alongside the image in the center.
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 1280px;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 192px;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 160px;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
Here is an example of how you could use relative length units, in this case percentages:
* {
box-sizing: border-box;
}
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 60%;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 20%;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 90%;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;
I couldn't set inline elements background like this:
My code is this:
#divMansetKategoriHaberleriContainer
{
background-color: Transparent;
margin-top: 4px;
font-size: 12px;
}
.divKategoriHaberItem
{
float: left;
background-color: White;
width: 324px;
height: 126px;
margin: 0;
padding: 0;
}
.divKategoriHaberItemImage
{
float: left;
width: 80px;
height: 80px;
border: 1px solid red;
margin: 2px;
}
.imgKategoriHaberResim_Cevre
{
width: 95%;
height: 95%;
}
.divKategoriHaberItemBaslikIcerik
{
}
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
}
.spHaberIcerik_Cevre
{
display: block;
}
.divKategoriHaberDevami_Cevre
{
background-image: url('../images/HaberinDevami_Cevre.png');
background-repeat: no-repeat;
background-position: right;
height: 13px;
}
<div class="divKategoriHaberItem">
<div class="divKategoriHaberItemImage">
<img src='' alt='DÜNYANIN MEKANİK Dengesi Bozuldu' class="imgKategoriHaberResim_Cevre" />
</div>
<div class="divKategoriHaberItemBaslikIcerik">
<span class="spHaberBaslik_Cevre">
<a href='CevreHaber.aspx?id=2128'>DÜNYANIN MEKANİK Dengesi Bozul</a>
</span>
<span class="spHaberIcerik_Cevre">Demokratik Kongo Cumhuriyeti'n</span>
</div>
<div class="divKategoriHaberDevami_Cevre"></div>
</div>
PS: Sorry for i couldn't write with sentences :(
If i understand the question correctly, you will need to add a line-height that equals the total height of your inline element ...
in your case that would be 30px (20px for the height + 10px for the padding 5px top and 5px bottom..)
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
line-height:30px; /*height + padding-top +padding-bottom*/
}