Вопросы Теги

Как я могу перенести текст вокруг нижнего правого отделения?

Вы можете определить пользовательский ControlTemplate и переопределить метод OnRender внутреннего ScrollViewer элемента RichTextBox: 

public class MyScrollViewer : ScrollViewer
{
    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);

        drawingContext.DrawLine(new Pen(Brushes.LimeGreen, 11.0),
                new Point(1, 1), new Point(115, 115));
    }
}

XAML: [117 ] 

<RichTextBox>
    <RichTextBox.Resources>
        <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
        <SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
        <SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
    </RichTextBox.Resources>
    <RichTextBox.Template>
        <ControlTemplate TargetType="{x:Type TextBoxBase}">
            <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                <local:MyScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="true">
                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </RichTextBox.Template>
</RichTextBox>
57
задан TylerH 18 February 2016 в 20:56
поделиться

3 ответа

Это уверенный, кажется, спросили прежде (2003) , и прежде (2002) , или прежде (2005)

, последняя ссылка на самом деле предлагает основанное на JavaScript решение , но для фиксированного (т.е. не жидкая) решение.

Это последовательно однако, с , другие советы нашли

единственный способ сделать, который должен поместить пущенный в ход элемент где-нибудь посреди текста. Невозможно получить его прекрасный все время.

Или этот :

Это состоит из плавания вертикального элемента "толкателя" (такого как img, но, вероятно, более умно просто использовать пустое отделение), затем пуская в ход требуемый объект под ним, с помощью ясного свойства. Основная проблема с этим методом - Вы, все еще должны знать, сколько строк там имеет текст. Это делает вещи НАМНОГО легче, хотя, и мог определенно быть кодирован с JavaScript, просто должен изменить высоту "толкателя" к высоте контейнера минус высота плавания (предположение, что Ваш контейнер не является фиксированной высотой / минимальной высотой).

Так или иначе, как обсужденный в этом потоке , нет никакого легкого решения...

<час>

Cletus упоминает в комментариях этот поток с 2003 , который указывает еще раз факт, он не может легко быть достигнут.
Однако это действительно относится к этому статья Eric Meyer, которая близко подходит к эффекту, которого Вы хотите достигнуть.

Путем понимания, как плавания и нормальный поток касаются друг друга, и понимающий, как очистка может использоваться для управления нормальным потоком вокруг плаваний, авторы могут использовать плавания как очень мощный разметочный инструмент.
, поскольку плавания не были первоначально предназначены, чтобы использоваться для расположения, некоторые взломы могут быть необходимыми, чтобы заставить их вести себя, как предназначено. Это может включить плавающие элементы, которые содержат плавания, "очищая" элементы или комбинацию обоих.

<час>

все же, Chadwick Meyer предлагает в [1 112] его ответ решение на основе :before селектор CSS (изменение [1 114] ответ Leonard ).
Это делает работа здесь .

29
ответ дан VonC 24 November 2019 в 19:48
поделиться

Решение, которое я нашел, включает это, у Вас есть отделение, ширина которого не делает изменений, ни делает сумму текста. Затем можно расположить изображение в тексте и иметь его align=right. Таким образом, если у Вас есть корректная сумма текста вокруг этого, затем Вы Вы получаете изображение справа и у основания отделения 

    <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...
     hey hey text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...
</div>
-1
ответ дан user58670 24 November 2019 в 19:48
поделиться

Хорошо. Так что у меня действительно была такая же проблема, и в какой-то момент ответ поразил меня, как сырный пирог в субботу вечером. Это почти такой же эффект попадания и пропуска, который возникает при попытке установить перенос текста в Word. 

img.right {
     float: right;
}

Теперь все, что вам нужно сделать, это просто установить его ВНУТРИ текста, где вы хотите, чтобы строки разрывались. Текст будет плавать до конца текста, поэтому он всегда будет сдвигать текст влево, но если вы поместите изображение в середину текста, например ... 

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

, верхняя часть останется на месте, и текст будет свободным чтобы плавать над изображением, а остальная часть сдвигается влево от изображения. Это обходной путь, но не такой утомительный, как использование JS, а если вы используете редактор WYSIWYG, это еще проще. Подумайте об этом, если вы используете редактор WYSIWYG, он имеет эту функцию автоматически. : P Проблема решена.

Ура.

-2
ответ дан 24 November 2019 в 19:48
поделиться