Question

您知道智能手机文字的气泡宽度是如何根据文字的长度而变化的，但是它有一个最大宽度，它会强制文字开始换行吗？

与此类似，我如何在css中创建div呢？

Answer 1

将max-width与div { display: inline-block; max-width: 100px; border: 1px solid red; border-radius: 5px; margin: 10px; }

一起使用

＆＃13;

<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum delectus.</p></div>

<div><p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p></div>

＆＃13;

div {
  float: left;
  clear: both;
  max-width: 100px;
  border: 1px solid red;
  border-radius: 5px;
  margin: 10px;
}

＆＃13;

或者，如果需要堆叠

＆＃13;

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum delectus.</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

＆＃13;

heroku addons:create redistogo
heroku config:set REDIS_PROVIDER=REDISTOGO_URL

＆＃13;

Answer 2

试试这个。

p.bubble
{
	position: relative;
	display:inline-block;
	width:auto;
 	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

p.bubble:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100px;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

p.bubble:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 100px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}

<p class="bubble">Chris: Hey dude, how are you?</p>

顺便说一句：我花了2秒才谷歌。

如何在智能手机文本气泡等文本周围包裹<div>？

2 个答案: