Please check and run this example.
img {
width: 10px;
}
pre {
overflow: initial;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
max-width: 300px;
border: 1px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<pre>Lorem ipsum, dolor sit amet consectetur ad<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
<pre>Lorem ipsum, dolor sit amet consectetu<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
<pre>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod voluptate nesciunt velit? Officiis doloribus fugit et harum nobis assumenda<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
</body>
</html>
I need to let the icon follow the text inside the pre tag, but at some situation the text length will be exact the max-width of the pre tag, which leads to make the icon present at the next line.This has a very bad user experience. Please tell me how to design this edit-icon. Thank you.
You can't do it. It's a staic image.
Solution: You can use Icon from https://fontawesome.com/icons
Steps:
Add a font awesome CDN.
Stats using icons
You can easily design icons using CSS
Example:
<i class="fas fa-edit"></i>
Related
I use the cursor style in .css file in style and using inline style, but it doesn't work.
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./../css/index.css"> -->
</head>
<body style="cursor: url('./../images/AppStarting.ani');">
<!-- 一个术语的解释: -->
<div>
<dl>
<dt>luoyang</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro harum facilis placeat quis, assumenda autem ad adipisci quasi dicta sint eaque veritatis omnis incidunt sequi non doloribus vero, maxime consequuntur.</dd>
</dl>
</div>
</body>
</html>
I found the .ani on another cursor website. Actually, I use lots of pics, but it still doesn't work and the inspector said:
I don't know what's wrong.
Animated images like .ani, .cur file formats are not supported anymore MDN.
I found that the following points are must be met when you link your image.
Image should be in the same folder as your .html file
Image should be less than or equal 32x32 pixels
You must enclosed your CSS in <style></style> tags or use separate CSS style file
You must have any content within your tag if not the CSS will not trigger.
URL(...) must be followed by one of the fallback keywords defined in the CSS specification, such as auto or pointer
I tried .png, .jpg files it is working by following those points. Your CSS looks fine therefor I assume your images are larger than 32x32 pixel. Reduce the image pixel to 32x32 and check. Hope its helps you.
LIMITATIONS
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
(Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32×32px. This is fixed in later versions.)
UPDATE
Working code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<title>Test</title>
<style>
body {
background-color: powderblue;
cursor: url(cursor.png), auto;
}
</style>
</head>
<body>
<div>
<dl>
<dt>luoyang</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro harum facilis placeat quis, assumenda autem ad
adipisci quasi dicta sint eaque veritatis omnis incidunt sequi non doloribus vero, maxime consequuntur.</dd>
</dl>
</div>
</body>
</html>
I'm creating an HTML file in xcode and trying to display its contents in the browser. I made an empty file and wrote this in:
<html>
<head>
<title>HTML is Structure Only (After)</title>
</head>
<body>
<h1 style="color: green; font-size: 60px; text-align: center;">HTML is Structure Only</h1>
<p style="margin: 0 100px 0 100px; font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae temporibus esse suscipit nisi ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, doloribus eos perspiciatis.</p>
<footer>
<hr>
<p style="text-align: center;"
onclick="alert('EMAILING US IS USELESS');">
Tech Support: yeah.right#server-is-down.com
</p>
</footer>
</body>
</html>
I cd'd into the directory where the file is and ran
browser-sync start --server --files. Instead of displaying the file contents in safari it just showed me a cannot GET / error page. Help???
I'm on macOS 10.15. The HTML text is not mine, I took it from my lecturer's github repo.
Try adding a <!DOCTYPE html> to the beginning of the document, before the <html>
I have written style for my div element and div element at body section. When the code runs I see two div element at screen. Even when the body section is empty, the div seems at screen. I write on Visual Code. Please help me..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
p {
letter-spacing: 1px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>article 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sit, omnis voluptatibus quasi exercitationem cupiditate reprehenderit quidem distinctio. Omnis <span>temporibus</span> necessitatibus illo deleniti quia reprehenderit aspernatur molestias
rerum veniam quam!
</p>
</div>
</body>
</html>
It might be a cache related issue. Press "ctrl + shift + i", right click on the reload icon at the top left corner and select "Empty cache and hard reload". This MIGHT solve the issue.
I need to style inner span element which is inside of contenteditable block by focus on that inner span, it has to be highlighted when is focused. Is that even possible somehow?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
</style>
</body>
</html>
In order to highlight just the span element when you focus it try this in your stylesheet :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
[contenteditable="true"] span:active {
background-color: red;
}
</style>
</body>
</html>
I added a simple script so the element keeps being red when the mouse leaves. Have a look :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum, at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
</style>
<script>
let selectedElement = null;
const setFocus = e => {
if (selectedElement)
selectedElement.style.backgroundColor = 'antiquewhite';
selectedElement = window.getSelection().focusNode && window.getSelection().focusNode.parentNode;
if (selectedElement && selectedElement.tagName == 'SPAN')
selectedElement.style.backgroundColor = 'red';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;
</script>
</body>
</html>
Ok, as you requested no JavaScript and I already invested a lot of time in this question, this is my last answer. I know it is not entirely correct but it is not entirely wrong either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" data-id="123">
<p contenteditable="true">
Lorem ipsum dolor sit amet </p><span contenteditable="true">consectetur</span>
<p contenteditable="true"> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
</p><span contenteditable="true">maxime</span>
<p contenteditable="true"> laudantium corrupti esse ab nostrum, at quis </p><span contenteditable="true">quas</span>
<p contenteditable="true"> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
p,
span {
display: inline;
}
</style>
</body>
</html>
Similar case here:
CSS: :focus of elements within contenteditable
You can use tabindex in span tags. that will solve your problem.
you can read more about tabindex here enter link description here
and focus will work when you use your keyboard. in this case, use your tab to get focus in span tags.
body {
font-size: 1.2rem;
line-height: 2rem;
}
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus,.block span:hover {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span tabindex=0>consectetur</span> adipisicing elit.
Non facere atque aspernatur, pariatur architecto inventore explicabo
eligendi <span tabindex=0>maxime</span> laudantium corrupti esse ab nostrum, at
quis <span tabindex=0>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
</body>
</html>
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 6 years ago.
I have a paragraph inside a container. The container is inside a div which has a max-width of 900px. At the moment,when I open the browser,I see that max-width works but the content is shifted to the left and there is a space on the right due to the max-width.
Here my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<style>
.wrap{
max-width:900px;
}
</style>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap" style="text-align:justify">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi soluta rerum aliquid voluptates, enim reiciendis. Laboriosam, voluptas itaque quis soluta dignissimos, blanditiis, nemo esse deserunt, cumque perferendis nesciunt voluptates magnam.</p>
</div>
<img src="Post1.jpg" alt="">
</div>
</body>
</html>
How can I put the container in the center?
Also, is there a way that I can keep the image inside the container but make the width full bleed?
Try this:
.wrap{
width:900px;
margin: 0px auto;
max-width:900px;
}
The container will be centered. And the image will be larger than the parent.