To format paragraphs I use text-align:justify, but I have one problem that there are big spaces between words, for IE the solution is to use text-justify: distribute;, but Chrome doesn't support this, my question is what should I use for Chrome and Firefox
Example of big spaces: http://jsfiddle.net/L5drN/
Give negative values as you prefer for word-spacing..
ex:
text-align:justify;
word-spacing:-2px;
Works for me and Hope this helps :)
Use:
word-break: break-all;
And Ok!
Consider using hyphenation (manual, CSS, server-side, or client-side JavaScript), see e.g. answers to Can I use CSS to justify text with hyphenating words at the end of a line?
Hyphenation tends to help a lot when there are long words in the text.
You can still keep text-justify: distribute, as it can improve the result on supporting browsers, and it can be expected to gain support, as it in the CSS standardization track (in CSS Text Module Level 3 WD).
text-align: justify;
text-justify: distribute;
text-align-last: left;
hope this will help you
I got something satisfying by combining both methods:
enable hyphens (using two variants for compatibility)
negative word spacing (no more than -0.05em otherwise text get condensed)
div.justify {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
word-spacing: -0.05em;
}
div.font {
font-size: 110%;
}
<div class="justify font">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.</div>
How do you want to format the paragraphs? Do you mean the width, height, letter spacing or word spacing?
Have you tried using the text-align CSS tag?
text-align:center
Or the word-spacing CSS tag?
word-spacing:10px
I have an alternate solution to get rid of the big spacing between word
first you should know one thing that text-align:justify is used only when you are rendering your text component on wider screen so in my case I was using it on card custom component so I simply increase the width of my card component and this helps me hope it will help you to.
Card.js
import React from 'react';
import styles from './Card.module.css'
const Card = (props) => {
return (
<div className={styles.card}>
{props.children}
</div>
);
} ;
export default Card;
Card.module.css
.card {
height: 30rem;
width: 25rem;
margin: 0 20px 10rem;
text-align: justify;
}
Calling card component in HOC
import React, { useEffect, useState } from "react";
import projectStyles from "./project.module.css";
import Card from "../UX/Card";
import axios from "axios";
const Project = () => {
const [loadedProjects, setLoadedUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
try {
const responseData = await axios("api/projects");
setLoadedUsers(responseData.data.projects);
} catch (err) {}
};
fetchUsers();
}, []);
const displayHandler = (
<div className={projectStyles.projectHolder}>
{loadedProjects.map((project,index) => {
return (
<Card key={index}>
<img src={project.image} alt="project" height={225} width={345} style={{marginBottom:"20px"}}/>
<p style={{fontSize:'25px' , fontWeight:'bold'}}>{project.title}</p>
<p className={projectStyles.body}>{project.info}</p>
<h4>Technologies Used</h4>
<ul key={project.image}>
{project.technology.map((tech) => {
return <li key={tech}>{tech}</li>;
})}
</ul>
</Card>
);
})}
</div>
);
return <div>{loadedProjects ? displayHandler : 'Fetching Projects...'}</div>;
};
export default Project;
Related
I'm implementing a rich text editor to my React web app using Draft.js.
The only options I've kept in the toolbar are inline-styling (bold, italic, underline) and numbered/bulleted lists.
Before implementing the text editor, the texts in my database were simple strings that I could retrieve, display in a styled component and apply CSS to, so the first letter in the text looked like this:
This was my React styled component :
export const Text = styled.p`
&:first-letter {
float: left;
font-family: 'Centaur';
font-size: 3.5rem;
line-height: 0.65;
margin: 0.1em 0.1em 0.1em 0;
}
`
Now that I'm using Draft's text editor, my text is being displayed in a div that has a dangerouslySetInnerHTML property applied to it, so I can't apply CSS to it to edit the style of the first letter.
How can I get my head around this? I know that I can retrieve the editor's plain text with: editorState.getCurrentContent().getPlainText('\u0001')
I was thinking about storing the first letter of the text in the database to wrap it with a CSS class when displaying it, but then I would need to remove that letter from the rest of the text content saved so that the first letter doesn't appear twice, and I don't know how to alter Draft.js text content while retaining the styling.
This is my Draft.js Editor component with a Preview component underneath that displays the formated text:
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import { convertToHTML } from 'draft-convert';
export default function MyComponent() {
const [editorState, setEditorState] = useState( () => EditorState.createEmpty() );
const [convertedContent, setConvertedContent] = useState('');
const handleChange = () => {
let currentContentAsHTML = convertToHTML(editorState.getCurrentContent());
setConvertedContent(currentContentAsHTML);
}
const createMarkup = (html) => {
return {
__html: html
}
}
return (
<>
<Editor
editorState={editorState}
onEditorStateChange={setEditorState}
toolbar={{options: ['inline', 'list', 'link', 'emoji', 'remove', 'history']}}
onContentStateChange={handleChange}
/>
<Preview dangerouslySetInnerHTML={createMarkup(convertedContent)}></Preview>
</>
)
}
Do you have any suggestion?
Thank you!
I'm trying to override the margin attribute of a Separator component using Microsoft's Fluent UI using React. The top-margin appears to default to 15px and I would like it to be less than that.
Here's a screenshot:
The beige color section above is defaulting to 15px and I'd like to shrink it but I can't seem to find the correct css to do so.
Here's the code I have thus far:
const separatorStyles = {
root: [
{
margin: 0,
padding: 0,
selectors: {
'::before': {
background: 'black',
top: '0px'
}
}
}
]
};
export default class Home extends Component {
render() {
return (
<Stack verticalAlign="center" verticalFill gap={15}>
<Component1/>
<Separator styles={separatorStyles} />
<Component2 />
</Stack>
);
}
}
I've tried placing the margin: 0 where it currently is at the root level and also nested below the ::before but neither have worked.
The only other potential clue I have comes from an inspection of the styles in Chrome's DevTools which yields:
Any ideas would truly be appreciated!
Thanks for your time!
The 15px actually came from the gap prop that was passed to the Stack component. It takes care of adding that css class to children elements to ensure the proper margins exist.
I believe removing it altogether should solve your concern, such as in this example (link to working code):
<Stack verticalAlign="center" verticalFill>
<button>Button1</button>
<Separator>no margin</Separator>
<button>Button2</button>
<Separator />
<button>Button3</button>
</Stack>
However, it is worth noting that the Separator expects to render some text, so you might have trouble getting it to be the exact height you want (as font-size is a concern for the Separator). If that's the case, you might be better off just making your own control to render a 1px line with a simple div or span.
Also you can you use this approach with styled-component:
import React from 'react'
import {Separator} from '#fluentui/react'
import styled from 'styled-components'
const StyledSeparator = styled(Separator)`
&::before {
margin-top: 15px;
}
div {
//any styles for separator-content
}
`
export const Divider = ({children}) => {
return <StyledSeparator>{children}</StyledSeparator>
}
I am having trouble reading the margin-right css property of the body. It seems to fail on initial render, but a few times it seemed to work when I was manually setting the margin-right. I expect it has something to do when when the component is rendering. Tried in useEffect and useLayoutEffect without success.
Pertinent CSS:
body {
margin-right: 10px;
}
Simple create-react-app:
function App() {
const [marginRight, setmarginRight] = useState(
document.body.style.marginRight
);
return (
<div className="App">
<p>BODY Right margin is: {marginRight}</p>
</div>
);
}
HTMLelement.style only returns inline styles. To access style from your css file, you should use:
window.getComputedStyle(document.body).marginRight
Hi and thanks for the great work here. I'm pretty new in reactjs and I'm struggling to make it work with sandbox like jsfiddle.
I have a div called "app-content" tht is supposed to appear in the middle of the document just like the following :
For some reasons , I cant make the following thing on my sandbox , and I get the following : https://jsfiddle.net/w7sf1er6/8/
JS here
export default class App extends React.Component {
render() {
return (
<div className="app-content">
</div>
);
}
};
ReactDOM.render (
<App />,
document.getElementById('root')
);
and CSS here
html {
background-color: #e3e3e3;
font-family: regular, arial, sans-serif; }
body {
margin: 0 !important;
padding: 0 !important; }
a {
text-decoration: none; }
.app-content {
width: 1200px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: white; }
What am I mising ? I need to make it work on JSfiddle so I can share it with others developers. I wuld appreciate some help from our community.
Thanks.
You must install react-blocks via npm first if you haven't already.
Like so, npm install react-blocks
Once you have done this, you will need to import/require react-blocks within your react code.
// using an ES6 transpiler
import Block from 'react-blocks';
// not using an ES6 transpiler
var Block = require('react-blocks');
Next, the layout:
// Normal Flex layout
const App = () => {
return (
<Block layout>
<div>Alpha</div>
<div>Beta</div>
</Block>
);
};
// Reverse Flex layout
const Reverse = () => {
let { reverse } = styles;
return (
<Block style={reverse.block} layout vertical reverse>
<div>Alpha</div>
<div flex>Beta</div>
</Block>
);
};
Feel free to read more on the process here.
Hope this helps!
Your React component is not rendering to the div. You can see errors in the console log and doing "view frame source" on the HTML output pane will show you that the "div" element hasn't been replaced.
As Chris suggested, just start from a JSFiddle example that sets up React correctly.
The example above mainly differs from your code in that it imports React definitions.
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js" />
When I open my react app, the component below flashes with width:100%, probably because it inherits it from the material-ui card.
In my react app there are a lot of these components being rendered, each with their own width which are based on the parent component's data. I set the width with an inline style based on the props.
As I understand, the component has the inline style as it is created and there should be no delay to apply it. However I see all the SceneThumb components with 100% width for a a fraction of a second, before they apply the given inline style.
If I change the css of scene-thumb-parent to include some width, say 10% for example, then I'll see them all with 10% for a fraction of a second, before the inline style is applied. That makes me think there is a delay in applying inline css, but it really puzzles me..
Is this to be expected of react? Or of html in general? Is there any way to reduce this inline style application delay? Maybe it's something to do with the dev hot reloading setup I get from create-react-app?
SceneThumb.js (code that is irrelevant to the question has been omitted):
import React, { Component } from 'react';
import './scene-thumb.css';
import Card from 'material-ui/Card';
class SceneThumb extends Component {
render() {
return (
<div
className='scene-thumb-parent'
style={{width:this.props.width, left:this.props.left}}
>
<Card
className={this.props.selected?'scene-thumb-selected':'scene-thumb'}
>
<span>
Hello world!
</span>
</Card>
</div>
);
}
}
export default SceneThumb;
scene-thumb.css:
.scene-thumb-parent {
position:relative;
text-overflow:clip;
white-space:nowrap;
overflow:hidden;
min-width: 12px;
}
.scene-thumb-selected {
border: 2px solid red;
border-radius: 5px;
}
.scene-thumb,.scene-thumb-selected {
padding: 2px;
margin:2px;
position:relative;
}
The width prop is initially null or some other value. A moment later, the prop is updated which triggers another render. This is why you're seeing the flash you're talking about.
You can test this by adding the following to your render() function:
console.log(this.props.width)
You'll probably see it logging at least twice with different values.
There are many ways you can fix this. What makes most sense would depend on the rest of the application, and your personal preference. Regardless, here's one way:
render() {
if(!this.props.width) return null; //if it's null, render nothing.
return (
<div className='scene-thumb-parent' style={{width:this.props.width, left:this.props.left}}>
<Card className={this.props.selected?'scene-thumb-selected':'scene-thumb'}>
<span>Hello world!</span>
</Card>
</div>
);
}