标题文本从包装器转义 [英] Header text escapes from wrapper
本文介绍了标题文本从包装器转义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在移动设备上,标题文本从div包装器转义.我该如何预防?仅当剩下两个字符时才会发生.并且,如果可能的话,请仅使用纯CSS(如果需要,则使用jQuery).
On mobile devices the header text escapes from div wrapper. How can I prevent it? It only happens when the are 2 characters left. And if possible make it only with pure CSS (jQuery if needed).
HTML(Laravel-Blade)
HTML (Laravel-Blade)
@section('content')
@if($builds)
@foreach($builds as $result)
<div class="col-md-4">
<div class="builds">
<img src="{{ $result->icon }}" class="img-responsive" alt="Hero icon" />
<div class="text">
<h2>{{ $result->name }} - {{ $result->build }}</h2>
<i><span class="usercolored">{{ $result->created_by }} </span>,{{ date('d-m-Y', strtotime($result->date)) }} <br /> {{ $result->views }} zobrazení</i><br />
<button class="btn btn-primary btn-md">Přejit na build</button>
</div>
</div>
</div>
@endforeach
@else
<p>Nic nenalezeno</p>
@endif
@endsection
CSS
.builds {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
height: 191px;
margin-top: 10px;
}
.builds h2{
margin: 0;
}
.builds:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.builds img {
width: 171px;
height: 191px;
float: left;
}
.builds .text {
margin-left: 180px;
}
推荐答案
.builds h2{
word-wrap: break-word;
//word-break: break-all;
}
我为您创建了一个示例,以了解其工作原理.例子对于在相对较小的容器中容纳一个不寻常的长单词是有用的.
I've created an example for you to understand how it works. Examples are good for an unusually long word inside a relatively small container which won't fit.
div {
width: 100px;
border: 1px solid red;
}
/* word-wrap: break-word recently changed to overflow-wrap: break-word. */
.overflow {
/* A long word/string will break in random places.
A hyphen character will not be inserted. */
overflow-wrap: break-word;
}
/* A very long word WILL NOT start at the point it should start.
It will be wrapped to next line and then being broken. */
.word-wrap {
word-wrap: break-word;
}
/* Avery long word starts at the point it
should start and it is being broken. */
.word-break {
word-break: break-all;
}
Normal:
<div>I am a text that 0123456789012345678901234567890123456789</div><br>
overflow-wrap: break-word;
<div class="overflow">I am a text 000001234567890123456789</div><br>
word-wrap: break-word;
<div class="word-wrap">I am a text 000001234567890123456789</div><br>
word-break: break-all;
<div class="word-break">I am a text 000001234567890123456789</div><br>
这篇关于标题文本从包装器转义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文