Javascript 没有空格时中断单词

我的html布局中有以下div结构

<div class='main-container'>
    <h5 class='hotel-name'></h5>
    <div class='hotel-price'></div>
</div>

我没有为任何元素定义任何宽度。每个元素中的内容都是动态绘制的。例如，下图显示了加载所有数据后结构的外观

但我的问题是，有时名字很长，价格却下降了

问题的示例图像

---

如何解决此问题。我正在使用Bootstrap3.1和我的自定义css构建这个布局

你能更新你的CSS吗

.hotel-name {
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 10px 0 0 20px;
    display: inline-block;
    white-space: nowrap;
    word-wrap: break-word;      // <- New Line
}

。酒店名称{
字体大小：13px；
字体大小：粗体；
位置：相对位置；
填充：10px 0 20px；
显示：内联块；
空白：nowrap；
word wrap:break word；//试试这个，使用clearfix类

<p class="clearfix"></p>


下面是一个使用Flex box的工作示例。
Flexbox是设计和校准的新标准


如果你只是想让价格保持在右下角，使用浮动不是一个好主意。
位置：绝对div位置：相对div将帮助您更好地定位价格标签

例如：

.main-container {
    position: relative;
    border-bottom: 1px solid #EBEBEB;
    height: 55px;
}

.hotel-price {
    display: inline;
// ========== Here is the change =================
    position: absolute;
    bottom: 0px;
    right: 0px;
// ===============================================
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}

您可以尝试使用display:table cell css属性

.hotel-name {
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 10px 0 0 20px;
    display: table-cell;
    white-space: nowrap;
}

.hotel-price {
    display:  table-cell;
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}

指定宽度。这会解决您的问题。为什么不指定宽度？只需为“hotel name”类指定宽度指定固定宽度将删除流体布局行为，对吗？我必须在何处插入此p标记？放置
后。
.main-container {
    position: relative;
    border-bottom: 1px solid #EBEBEB;
    height: 55px;
}

.hotel-price {
    display: inline;
// ========== Here is the change =================
    position: absolute;
    bottom: 0px;
    right: 0px;
// ===============================================
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}

.hotel-name {
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 10px 0 0 20px;
    display: table-cell;
    white-space: nowrap;
}

.hotel-price {
    display:  table-cell;
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    padding: 6px 25px;
    border-top: none;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    color: #3CA7B4;
}