gpt4 book ai didi

html - 如何将内容包含在
中?

转载 作者:行者123 更新时间:2023-11-28 04:52:54 25 4
gpt4 key购买 nike

我有一个对象属性,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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com