Ionic Grid Colum problem

ionic-v1
1

Hey guys, take a look at this screenshot:

You can see the text is not respecting the screen limit.
How can I add a breakline or do something to solve this problem?

This is the code:

<!--Ionic native grid-->    
<ion-item ng-repeat="atividade in atividades" type="item-text-wrap">
    <div class="row responsive-sm" ng-click="manterAtividade(atividade)">
        <div class="col col-10"><strong>Início:</strong> {{atividade.dataInicio | jsonDate:'HH:mm'}}</div>
        <div class="col col-10"><strong>Fim:</strong> {{atividade.dataFim |  jsonDate:'HH:mm'}}</div>                        
        <div class="col"><strong>Cliente:</strong> {{atividade.nomeCliente}}</div>
        <div class="col"><strong>Atividade:</strong> {{atividade.descricaoAtividade}}</div>
    </div>
</ion-item>
<!--  -->
2

Please, Anyone???

3

Check out ngTruncate. I think this is what your are looking for.

4

I’ll try that but I cant accomplish it using css only?
Actually, I still wanna show the content with a line break or something. Truncate is not a solution