How can I make this text overflow effect?
This information is being displayed within a MUI Card of a fixed width.
This is what my code looks like:
cardContent: {
fontWeight: 700,
color: "#0E0E0E",
fontSize: "16px",
lineHeight: "24px",
},
cardComment: {
fontWeight: 400,
color: "#0672CB",
fontSize: "16px",
lineHeight: "24px",
textDecoration: "underline",
width: "100px",
"&:hover": {
color: "#0672CB",
textDecoration: "underline",
},
},
...
<Typography className={classes.cardContent}>
Comment: <a className={classes.cardComment}>{group.SizingComments}</a>
</Typography>
.cardContent {
display: flex;
}
.cardComment {
width: 180px;
/*You have to provide width here*/
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="cardContent">
Comment:<a class="cardComment" href="javascript:void(0);">Begining of the comment some example text</a>
</div>
All you need is just add the below CSS to .cardComment class and provide width to see text-overflow:ellipsis in effect.
.cardComment {
width: 180px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Related
I made a button using MUI that has a round linear gradient border when hovering over it.
When I zoom out of the browser, the border breaks.
Here is an image of what the button looks like when zooming out of the page.
Here is my code:
const CustomButton = styled(Button)<ButtonProps | any>(({theme, variant}) => ({
borderRadius: '8px',
color: '#E7E7E1',
display: 'block',
letterSpacing: '1px',
padding: '0px',
position: 'relative',
zIndex: 2,
border: '1px solid #FFFFFF',
margin: '1px',
backgroundPosition: 'bottom',
'&:hover': {
border: 'none',
padding: '1px',
backgroundImage: 'linear-gradient(to left, red, green)',
color: '#fff',
zIndex: 1,
},
}));
const TestingButton = () => {
return (
<div className={classes.container}>
<CustomButton className={classes.button}>
<span className={classes.text}>Testing</span>
</CustomButton>
</div>
);
};
export default TestingButton;
.container {
margin-top: 20px;
margin-right: 40px;
}
.button {
margin-left: auto;
}
.text {
width: 100%;
background: #0e0e0e;
border-radius: 8px;
padding: 50px 200px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0.4px;
color: #ffffff;
}
.text:active {
background: #262626;
}
I have the following .scss file:=
.singleNews {
text-decoration: none;
font-family: $font-family;
font-size: $font-size;
font-weight: $regular-font-weight;
&__image {
padding: 5em;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&.featured {
height: 75%;
}
}
}
so how i can define the featured? i tried the following but all failed:-
import styles from './SingleNews.module.scss';
//code goes here...
<div className={styles.singleNews__image__featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image.featured} style={{ backgroundImage: `url(${post.image})` }}/>
&.featured selects the the parent selector with the class featured, which means that the div need have the classes singleNews__image and featured
.singleNews__image.featured {
background-color: blue;
width: 100px;
height: 100px;
}
/* Same selector with Sass */
/*
.singleNews {
&__image {
&.featured {
background-color: blue;
width: 100px;
height: 100px;
}
}
}
*/
<div class="singleNews__image featured">
</div>
I have this going in react bootstrap. I have movie cards which consist of a picture, some text and a button. I need all of the cards to be equal height but the data inside keeps overflowing. It is built with bootstrap because it was a bootcamp project and I need to polish it up. I am trying to use flexbox for the cards but am having trouble.
EDIT:
I want the cards to remain the same so the text can overflow but it needs to stay hidden and not show partial text.
What I want (Notice how the text cuts off and there is no partial text showing)
<Card className="cardClass">
<div style={{textAlign: 'center'}}>
<Card.Img className="card-image" variant="top" src={movie.ImagePath} />
</div>
<Card.Body>
<div className="card-text-body">
<Card.Title>{movie.Title}</Card.Title>
<Card.Text>{movie.Genre.Name}</Card.Text>
<Card.Text className='card-description'>{movie.Description}</Card.Text>
<Link to={`/movies/${movie._id}`}>
<Button className="movieCard-btn" variant="primary">View Movie</Button>
</Link>
</div>
</Card.Body>
</Card>
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
}
.cardClass {
max-width: 100%;
height: 400px;
}
.card-image{
width: 100px;
height: 150px;
object-fit: cover;
text-align: center;
}
.card-title {
font-weight: 900;
}
.card-text-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.card-description {
font-size: 13px;
overflow: hidden;
}
.card-body {
font-weight: 400;
}
.movieCard-btn {
width: 100%;
margin-top: 1rem;
}
.btn .btn-primary {
text-align: center!important;
}
.btn-primary {
color: black;
background-color: goldenrod;
border-color: black;
}
.btn-primary:hover {
color: black;
background-color: goldenrod;
border-color: black;
}
a {
text-decoration: none!important;
}
Two approaches here:
First
Limit the description characters, something like:
let description = movie.description;
if (description.length > 120) {
description = description.substring(0, 120);
}
Or
Card must be 100% height to fill remaining space.
Your title set to flex-grow: 1, in order to push everything down below.
Don't forget to set height on description box and also overflow: hidden;
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
height: 100%;
}
.card-title {
font-weight: 900;
flex-grow: 1;
}
.card-description {
font-size: 13px;
overflow: hidden;
height: 100px;
}
I need the content below the (tabs+selected-content) to respect the space of the absolute selected-content currently being displayed on the page within the parent container of relative. Anyone have any ideas how to do this?
code sandbox: https://codesandbox.io/s/tabs-content-space-respected-m0gql
Files
App.js
import "./styles.css";
import TabsWithContent from "./Components/TabsWithContent.js";
export default function App() {
return (
<div>
<TabsWithContent />
<h1 style={{textAlign: "center"}}>I am the next content, please respect my space</h1>
</div>
);
}
Components\TabsWithContent.js
import React, { useState } from "react";
// Data from backend
import { tabOneContent, tabTwoContent, tabThreeContent } from '../BackendData/TabsContent.js';
const TabsWithContent = () => {
// Variables
const [tabSelected, setTabSelected] = useState(1);
// Functions
const changeTab = (ev, tabNum) => {
ev.preventDefault();
setTabSelected(tabNum);
};
// Render
return (
<div className="div-tabs-with-content">
<div className="page-container-content">
<h2>Tabs Example</h2>
<div className="div-tabs">
<button onClick={ev => changeTab(ev, 1)} style={tabSelected === 1 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab One</button>
<button onClick={ev => changeTab(ev, 2)} style={tabSelected === 2 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab Two</button>
<button onClick={ev => changeTab(ev, 3)} style={tabSelected === 3 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab Three</button>
</div>
<div className="div-tabs-content-container">
<section className={tabSelected === 1 ? "div-tabs-content active" : "div-tabs-content"}>
{tabOneContent.map((content, index) =>
<div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
)}
</section>
<section className={tabSelected === 2 ? "div-tabs-content active" : "div-tabs-content"}>
{tabTwoContent.map((content, index) =>
<div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
)}
</section>
<section className={tabSelected === 3 ? "div-tabs-content active" : "div-tabs-content"}>
{tabThreeContent.map((content, index) =>
<div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
)}
</section>
</div>
</div>
</div>
);
};
export default TabsWithContent;
BackendData\TabsContent.js
const tabOneContent = ["Content One", "Content Two", "Content Three"];
const tabTwoContent = ["Content One", "Content Two", "Content Three", "Content Four", "Content Five", "Content Six"];
const tabThreeContent = ["Content One", "Content Two", "Content Three", "Content Four", "Content Five", "Content Six", "Content Seven", "Content Eight"];
export {
tabOneContent,
tabTwoContent,
tabThreeContent
}
index.css
.App {
font-family: sans-serif;
}
.page-container-content {
display: block;
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 25px 0 25px;
margin: 0 auto;
}
.div-tabs-with-content {
display: block;
width: 100%;
margin-bottom: 60px;
}
.div-tabs-with-content h2 {
margin-bottom: 20px;
color: #003478;
font-family: sans-serif;
font-size: 2.8rem;
font-weight: 700;
line-height: 36px;
text-align: center;
}
.div-tabs {
display: flex;
justify-content: space-around;
margin-bottom: 2rem;
}
.div-tabs button {
height: 50px;
width: 210px;
color: #003478;
background-color: #ffffff;
border: none;
font-family: sans-serif;
font-size: 2.4rem;
font-weight: 600;
line-height: 3.6rem;
outline: none;
cursor: pointer;
}
.div-tabs button:hover {
opacity: 0.7;
color: white;
background-color: #003478;
transition: 0.2s ease-in;
}
.div-tabs-content-container {
display: block;
position: relative;
width: 100%;
}
.div-tabs-content {
position: absolute;
left: 26%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 600px;
visibility: hidden;
opacity: 0;
}
.div-tabs-content-container .active {
transition: opacity 0.75s;
visibility: visible;
opacity: 1;
}
.div-tabs-content div {
display: flex;
align-items: center;
width: 200px;
}
.div-tabs-content i {
width: 24px;
height: 24px;
font-size: 1.6rem;
padding: 2.5px;
margin-right: 10px;
font-weight: 300;
color: #003478;
border: 2px solid #003478;
border-radius: 50%;
}
.div-tabs-content p {
color: #000000;
font-size: 1.6rem;
font-weight: 300;
line-height: 26px;
}
Check the working solution - https://codesandbox.io/s/tabs-content-space-respected-forked-lzrkh
.div-tabs-content-container .active {
transition: opacity 0.75s;
visibility: visible;
opacity: 1;
position: relative; /* you can use unset also */
}
I think it solved your problem.
Hello I am having trouble leaving my content at the center of this div
code :
https://codesandbox.io/s/hungry-https-c5432
I tried to put the inline display on h5 and it still didn't work
<div className="App">
<Menu
className="borderless"
style={{ width: "240px", height: "100vh" }}
vertical
>
<Menu.Item className="logo">
<Image src={logo} style={{ width: "50px", height: "50px" }} />
<h5>E M A S A</h5>
<Divider style={{ color: "#000 !important" }} />
</Menu.Item>
</Menu>
</div>
css:
.ui.menu {
border-radius: 0px !important;
border: 0px !important;
box-shadow: none !important;
background-color: #252631 !important;
}
.ui.menu .item {
padding: 8px !important;
}
r {
margin-bottom: 0 !important;
}r {
margin-bottom: 0 !important;
}
In order to align the img to center you can add
margin: 0 auto;
display: block;
and for aligning the text h5 you can add
text-align: center;
Check this link: https://codesandbox.io/embed/sweet-glitter-9toif?fontsize=14&hidenavigation=1&theme=dark
i understood you need them on the same line so add this to the css .ui.vertical.menu .item{display:flex;
justify-content:center;}
You need to update CSS, Here is the demo link
JSX Code
<Menu
className="borderless"
style={{ width: "240px", height: "100vh" }}
vertical>
<Menu.Item className="logo">
<h5>
<Image
src={logo}
style={{ width: "50px", height: "50px", marginRight: "10px" }}
/>
<span>E M A S A</span>
</h5>
<Divider style={{ color: "#000 !important" }} />
</Menu.Item>
</Menu>
CSS
.ui.menu {
border-radius: 0px !important;
border: 0px !important;
box-shadow: none !important;
background-color: #252631 !important;
}
.ui.menu .item {
padding: 8px !important;
text-align: center;
}
.ui.menu .item h5 {
text-align: center;
}
.ui.divider {
margin-bottom: 0 !important;
}
img.ui.image {
display: inline-block;
}