Съкратете текста в мрежата за първоначално зареждане

Използвам системата bootstrap col/grid. Как мога да съкратя текста вътре в колоната, така че да принуди един ред? Искам моето съобщение за грешка да бъде съкратено, така че да остане на същия ред като бутоните отляво (вижте издуването на изображението).

<div class="row">
    <div class="col-md-3">

        <button class="btn btn-raised btn-primary btn-sm" ng-click="">Refresh</button>

        <div class="btn-group">
            <a ng-click="" class="btn btn-success btn-raised btn-sm">Build</a>
            <a  class="btn btn-success btn-raised dropdown-toggle btn-sm" data-toggle="dropdown"><span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="/bg">Action</a></li>
                <li><a href="/bg">Another action</a></li>
                <li><a href="/bg">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="/bg">Separated link</a></li>
            </ul>
        </div> 

    </div>
    <div class="col-md-8">

            <div class="" ng-show="true" style="height:18px;">
                <span class=""><i class="fa fa-exclamation-circle text-danger" aria-hidden="true"></i></span>
                <span class="">
                    <i>{{errorMessage}}</i> <!-- I want to truncate this so that a the buttons and the error message are on the same row ...-->
                </span>
            </div>

    </div>
</div>

Опитах се да добавя това към div и span на съобщението за грешка, но това принуди текста под иконата

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html css twitter-bootstrap truncate
person rex    schedule 10.08.2016    source източник
comment
Няма клас .truncate за нито един от елементите във вашето маркиране. Също така би било полезно да видите целия CSS код, действащ върху това маркиране, тъй като диагностицирането на проблема от CSS извадка може да е невъзможно. Би било чудесно, ако можете да настроите codepen, който да демонстрира вашия проблем.   -  person McHat    schedule 10.08.2016

Отговори (4)


arrow_upward
0
arrow_downward

трябва да добавите 'max-width' към елемента, който съдържа съобщението, за да работи вашият css. т.е.

<i style="max-width: 80%;">My extremely long error message</i>

person Repo    schedule 10.08.2016

arrow_upward
0
arrow_downward

Задайте същата height и line-height, за да имате само линия:

.truncate {
  line-height: 20px;
  max-height: 20px;
  overflow: hidden;
  display:inline-block;
}
person stig-js    schedule 10.08.2016

arrow_upward
0
arrow_downward

можете да използвате разделяне на думи,

<style>
.truncate {
    word-break: break-word;
}
</style>
<span class="truncate">
                <i>{{errorMessage}}</i> <!-- I want to truncate this so that a the buttons and the error message are on the same row ...-->
            </span>
person Slimane amiar    schedule 10.08.2016

arrow_upward
0
arrow_downward

С Bootstrap 4 можете да използвате text-truncate клас.

<div class="text-truncate" ng-show="true" style="height:18px;">
    <span class="">
        <i>{{errorMessage}}</i>
    </span>
</div>
person Tim Rogers    schedule 15.11.2018