gpt4 book ai didi

html - 我怎样才能包装这个文本,这样它就不会溢出小部件容器?

转载 作者:太空宇宙 更新时间:2023-11-04 11:48:54 26 4
gpt4 key购买 nike

我有一个 Wordpress 小部件,在小部件内我正在显示个人资料信息。有时第二行的文本太长,会溢出小部件容器。

enter image description here

处理这个问题的好方法是什么?我如何在 css 或 html 或其他任何东西中实现它?

我的CSS

#profileContainer { 
float: left;
position: relative;
width: 400px;
display:block;
padding: 5px;
}

#avatarContainer {
width: 55px;
float: left;
padding: 5 5 5 5;
}

#dataContainer {
float: left;
vertical-align: text-top;
word-wrap: break-word;
}

#dataList {
display: inline-block;
}

我的输出html

?>
<div id="profileContainer">
<?php
$img = bp_core_fetch_avatar( 'html=false&item_id=' . $author->getId() );
$img_html = '<img src="' . $img . '"></img>';

?>
<div id="avatarContainer">
<?php

if ($author->getUrl() != null) {
echo "<a href='" . $author->getUrl() . "'>" . $img_html . "</a>";
} else {
echo $img_html;
}
?>
</div> <!--closing avatar container div -->

<div class="overflow-hidden">
<?php

if ($author->getName() != null) {
echo "<b>" . $author->getName() . "</b>";
}

if ($author->getJobTitle() != null) {
echo "<br/>" . $author->getJobTitle();
}

if ($author->getUserName() != null) {
if ($author->getUrl() != null) {
echo "<br/><a href='" . $author->getUrl() . "'>@" . $author->getUserName() . "</a>";
} else {
echo "<br/>@" . $author->getUserName();
}
}

if ($author->getEmail() != null) {
echo '<br/><a href="mailto:' . $author->getEmail() . '">' . $author->getEmail() . "</a>";
}

if ($author->getPhone() != null) {
echo "<br/> " . $author->getPhone();
}

echo "<br/>";

?>
</div> <!--closing data container div -->
</div> <!--closing container div-->
<?php

最佳答案

在 css 中执行此操作以省略号模式(三个点)包装文本

.overflow-hidden{
max-width:400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

关于html - 我怎样才能包装这个文本,这样它就不会溢出小部件容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30783093/

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