css的border属性可以做到根据内部文字自适应么？

Question

当前的样式DEMO

html<div class="outer">
    <span class="layout-left">多行文字，测试多行文字的边框。多行文字，测试多行文字的边框。多行文字，测试多行文字的边框，测试多行文字的边框。</span>
    <span class="layout-right">测试</span>
    <span class="layout-right">测试</span>
    <span class="layout-right">测试</span>
    <span class="layout-right">测试</span>
</div>

css.outer{width:200px;padding:10px;border:1px dashed #aaa;}
.outer span{border:1px solid #999;}
.outer .layout-right{float:right;white-space:nowrap;}

当前效果

希望达到的效果：
1. 多行文本layout-left，整个外围是一个边框包起来，现在是每行文字都有边框
2. 多行layout-right的内容需要和layout-left最后一排的文字并排显示（就像当前的这种）

Answer 1

你的虚线不是已经把他们包起来了吗？
可以设置.outer .layout-left{display: inline-block;}