没有空格时断字

Question

I've got the following div structure in my html layout.

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

and the css is as following for each element.

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

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

.hotel-price {
    display: inline;
    float: right;
    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;
}

I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.

but my problem is there are some occasions where the name is long and the price just drops down.

example image of the issue.

How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.

Answer 1

Can you update your 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
}

Here's the reference on MDN

Answer 2

试试这个，使用clearfix类

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

Answer 3

Here is a working example using Flex box. Flexbox is the new standard of designing and aligning.

http://jsfiddle.net/maxspan/t4QuH/

    #mainDiv{
    display:flex;
    flex-wrap: nowrap;
    width: 700px;
    background-color: lightgray;
}
#innerDiv{
    box-shadow:box-shadow: 2px 2px 2px #888888;
    width:200px;
    height:200px;
    border:1px;
    background-color: green;
    padding:12px;
}

Answer 4

Using float is not a good idea if you just want the price to stay in the right lower corner. position:absolute div in a position:relative div will help you better position your price tag.

Example:

.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;
}

Answer 5

You can try with display:table-cell css property

.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;
}