作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个对象属性,block.content
,就像我想在 <div/>
中显示的以下内容一样,但是 <p>
当文本正确包含在 <div/>
中时突出显示:
var block = {
"content": `<a href=\"http:\/\
/twitter.com\/ngun\" target=\"_blank\">@ngun<\/a> `
};
我怎样才能得到 block.content
包含在 <div>
中?
最佳答案
因为卡片中的 img 标签可以设置为任意大小的图像,所以您需要限制其最大尺寸以使其适合您的卡片。例如,如果您的卡片是 300x300 像素,但图像可以是 1000x1000,则您需要调整 img 标签的大小以匹配其 HTML 容器(DIV)而不是图像本身的大小。为此,您需要在动态内容的容器元素上应用 CSS 类。
在 CSS 中:
.dynamic-content-div img {
/* Set width of image to maximum width of Card, height will follow aspect ratio */
width: 100%;
}
JSX:
var block = {
"content": `<p><img src=\"http:\/\/media.tumblr.com\
/tumblr_lh6x8d7LBB1qa6gy3.jpg\"\/><a href=\"http:\/\
/citriccomics.com\/blog\/?p=487\" target=\"_blank\">TO READ
THE REST CLICK HERE<\/a><br\/>\n\nMilky Dog was inspired by
something <a href=\"http:\/\/gunadie.com\/naomi\"
target=\"_blank\">Naomi Gee<\/a> wrote on twitter, I really
liked the hash tag <a href=\"http:\/\/twitter.com\/
search?q=%23MILKYDOG\" target=\"_blank\">#milkydog<\/a>
and quickly came up with a little comic about it. You can
(and should) follow Naomi on twitter <a href=\"http:\/\
/twitter.com\/ngun\" target=\"_blank\">@ngun<\/a> `
};
return (
<Card style={{ width: 200, height: 300, overflow: 'auto' }}>
<CardText>
<div className="dynamic-content-div" dangerouslySetInnerHTML={{ __html: block.content }}/>
</CardText>
</Card>
);
jsFiddle 在这里:https://jsfiddle.net/4wm2drpt/
关于html - 如何将内容包含在 <div/> 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40595470/
我是一名优秀的程序员,十分优秀!